html - 如何使 Bootstrap Navbar 保持折叠状态

标签 html css wordpress twitter-bootstrap

<分区>

想改进这个问题吗？ 更新问题，使其只关注一个问题 editing this post .

关闭 8 年前。

Improve this question

我正在使用 customizr wordpress theme 建立一个网站它基于 twitter bootstrap，并希望导航栏始终出现在折叠布局中，以便菜单项仅通过单击 navbar-toggle 按钮(三个水平线)可见。

我认为我必须修改 @media 最小和最大宽度的 CSS，但无法正常工作。

简单来说，我希望它像在移动设备上一样显示在我的桌面上。

最佳答案

将 always-open 类添加到您的导航栏，然后使用以下 CSS:

.navbar.always-open {
    border-radius: 0;
}
.navbar.always-open .navbar-header {
  float: none;
}
.navbar.always-open .navbar-toggle {
  display: block;
}
.navbar.always-open .navbar-collapse {
  border-top: 1px solid transparent;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar.always-open .navbar-collapse.collapse {
  display: none!important;
}
.navbar.always-open .navbar-nav {
  float: none!important;
  margin: 7.5px -15px;
}
.navbar.always-open .navbar-nav>li {
  float: none;
}
.navbar.always-open .navbar-nav>li>a {
  padding-top: 10px;
  padding-bottom: 10px;
}

示例 HTML:

<nav class="navbar navbar-inverse <b>always-open</b>">
    <div class="navbar-header">
        <a class="navbar-brand" href="#">Brand</a>
        <button type="button" class="navbar-toggle" 
                data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
    </div>
    <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </div>
</nav>

Demo in fiddle

截图:

* Adapted from this bootply

BTW, if you're building your own version of Bootstrap with less:
You can just alter the @grid-float-breakpoint from @screen-sm-min to 999999999px

关于html - 如何使 Bootstrap Navbar 保持折叠状态，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24810000/