没有切换的 Bootstrap3 中的折叠菜单答案

【问题标题】：Collapse Menu in Bootstrap3 without Toggle没有切换的 Bootstrap3 中的折叠菜单
【发布时间】：2014-10-06 17:08:37
【问题描述】：

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

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

有什么想法吗？

【问题讨论】：

标签： css twitter-bootstrap menu twitter-bootstrap-3 collapse

【解决方案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;
  }
}

【讨论】：