bootstrap 4中的堆叠可折叠导航栏

Posted 2023-03-05

【中文标题】bootstrap 4中的堆叠可折叠导航栏

【英文标题】：Stacked collapsible navbar in bootstrap 4

【发布时间】：2016-02-02 20:52:18

【问题描述】：

我想创建一个可折叠的navbar。一切正常，但 nav 项目并没有像应有的那样堆叠在一起。它们水平相邻。

代码：

<nav class="navbar navbar-light bg-faded" role="navigation">
    <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#collapsing-navbar">
        &#9776;
    </button>

    <div class="collapse navbar-toggleable-xs" id="collapsing-navbar">   
        <a class="navbar-brand" href="/">Logo</a>

        <ul class="nav navbar-nav">
            <li class="nav-item">
                <a href="/messages" class="nav-link">Messages</a>
            </li>

            <li class="nav-item">
                <a href="/logout" class="nav-link">Logout</a>
            </li>
        </ul>
    </div>
</nav>

截图：

【参考方案1】：

Bootstrap 4 Alpha 6（由于内置了 alpha 6 版本的堆叠菜单 - 无需使用额外的 CSS）：

<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">Navbar</a>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="text" placeholder="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

CODEPEN

【讨论】：

谢谢。以后会支持，还是没有机会？

如果您的代码中有第二个导航栏被正确拉出并带有导航项，您知道您将添加什么 css 来完成这项工作吗？如果您的菜单有左右部分。 当您展开折叠的导航栏时，该栏中的任何导航项目仍将被拉到右侧。

我会将类添加到左侧导航栏（例如 my-navbar-left）并将其添加到 CSS，以便它仅适用于此导航栏。示例：.my-navbar-left .navbar-nav .nav-item float: none; .

这是我的意思的一个例子，当在较小的屏幕尺寸上展开时，正确的导航项目仍然被拉到右边。 codepen.io/anon/pen/qOyMWz这个应该设置不同还是用css来调整？

codepen.io/anon/pen/LpBJWV - 更改：我没有使用 pull-right，而是创建了新类 (.navbar-right) 并在比 34em 更宽的屏幕上应用了该类样式 (float: right)。 .pull-right 类的问题在于它有 !important 规则。我认为这是目前最好的解决方案。我认为人们不应该使用 Bootstrap 4 进行开发（用于学习 - 为什么不）。如果您基于 Bootstrap 4 创建站点，您可能会在最终版本发布时遇到问题。

【参考方案2】：

似乎使用这个 CSS 覆盖更容易完成：

@media(max-width:768px) 
    .navbar .navbar-nav>.nav-item 
        float: none;
        margin-left: .1rem;
    
    .navbar .navbar-nav 
        float:none !important;
    
    .navbar .collapse.in, .navbar .collapsing  
        clear:both;
    

http://codeply.com/go/Ar1H2G4JVH

更新

从 BS4 alpha 6 开始，不再需要额外的 CSS。导航栏标记已更改。 http://www.codeply.com/go/0OMz6nfPLr

【参考方案3】：

在涉及可折叠菜单时，Bootstrap 4 显示了一些不同的用户体验。

在 alpha 版本中，它看起来像 this。但是问题仍然存在Here，我们可能会在下一个版本中看到一些变化。

【参考方案4】：

从 Bootstrap 4 Alpha 5 开始，您可以利用 collapse 插件：

http://v4-alpha.getbootstrap.com/components/navbar/

<nav class="navbar navbar-light bg-faded">
  <button class="navbar-toggler hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"></button>
  <div class="collapse navbar-toggleable-md" id="navbarResponsive">
    <a class="navbar-brand" href="#">Navbar</a>
    <ul class="nav navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="http://example.com" id="responsiveNavbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
        <div class="dropdown-menu" aria-labelledby="responsiveNavbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>
    <form class="form-inline float-lg-right">
      <input class="form-control" type="text" placeholder="Search">
      <button class="btn btn-outline-success" type="submit">Search</button>
    </form>
  </div>
</nav>