css - 在没有切换的情况下折叠 Bootstrap3 中的菜单

Question

是否有一个 Bootstrap3 组件可以在断点处简单地折叠菜单而不添加切换。例如，如果我有一个在桌面上看起来像这样的水平菜单

在屏幕宽度低于 768px 时，我希望它可以简单地堆叠而不像这样折叠成一个切换

有什么想法吗？

Answer 1

删除折叠按钮和导航栏折叠类。从 getbootstrap.com 示例中，像这样的东西应该可以解决问题:

<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Project name</a>
    </div>
    <div>
      <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>
  </div>
</div>

您将必须添加一个媒体查询以确保将填充添加到移动显示中的内容。

我做了一个 Bootply here我在其中添加了以下 CSS 以使其工作:

@media screen and (max-width: 768px) {
  #wrap > .container {
    padding-top:200px;
  }
}