bootstrap页面缩小导航收缩和展开

最新推荐文章于 2024-08-19 21:39:59 发布

仙人掌_的刺

最新推荐文章于 2024-08-19 21:39:59 发布

阅读量5.3k

点赞数

本文链接：https://blog.csdn.net/qq_38670879/article/details/73558681

版权

本文探讨了在Bootstrap框架中，当页面尺寸变化时，如何通过使用`<ul>`和`<div>`标签影响导航菜单的收缩与展开行为。在示例中，使用`<ul>`标签的导航在页面缩小后会自动收缩，而使用`<div>`标签的导航则不会。这涉及到Bootstrap的响应式设计和导航栏的折叠机制。

摘要由CSDN通过智能技术生成

导航使用ulli标签时，当页面缩小时，菜单收缩

<div class="navbar navbar-default" role="navigation">
    　<div class="navbar-header">
    　    <a href="##" class="navbar-brand">慕课网</a>
    　</div>
    <ul class="nav navbar-nav">
        <li><a href="##" class="navbar-text">Navbar Text</a></li>
        <li><a href="##" class="navbar-text">Navbar Text</a></li>
        <li><a href="##" class="navbar-text">Navbar Text</a></li>
    </ul>
</div>

导航使用div标签时，当页面缩小时，菜单不收缩
<div class="navbar navbar-default" role="navigation">
    　<div class="navbar-header">
    　    <a href="##" class="navbar-brand">慕课网</a>
    　</div>
    <div class="nav navbar-nav">
        <a href="##" class="navbar-text">Navbar Text</a>
        <a href="##" class="navbar-text">Navbar Text</a>
        <a href="##" class="navbar-text">Navbar Text</a>
    </div>
</div>