在Bootstrap3中折叠菜单而不切换

hc2pp10m  于 2022-12-07  发布在  Bootstrap
关注(0)|答案(1)|浏览(155)

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

在屏幕宽度低于768px,我希望它只是堆叠,而不是折叠成这样的切换

有什么想法吗?

8nuwlpux

8nuwlpux1#

删除collapse按钮和navbar-collapse类。在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;
  }
}

相关问题