左侧的引导导航栏对象不会在移动设备上显示答案

【问题标题】：Bootstrap navbar objects on the left won't show on mobile左侧的引导导航栏对象不会在移动设备上显示
【发布时间】：2018-05-01 18:58:19
【问题描述】：

由于某些我无法弄清楚的原因，我放在左侧的引导导航栏按钮在我使用手机时不会显示（右侧的按钮：“主页”和“链接 2” ，工作得很好）。特别是“注册”和“登录”按钮坏了。

<nav class="navbar navbar-expand-lg navbar-light bg-light" style="margin-bottom:30px">
<a class="navbar-brand" href="#">Website name</a>
<button class="navbar-toggler" 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>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
            <a class="nav-link" href="#">Start <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Link 2 </a>
        </li>
    </ul>
</div>
<div class="navbar-collapse collapse w-100 order-3 dual-collapse2">
    <ul class="navbar-nav ml-auto">
        <li class="nav-item">
            <a class="nav-link" href="signup">Register</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="login">Log in</a>
        </li>
    </ul>
</div>

谢谢！

【问题讨论】：

标签： html css responsive-design navbar

【解决方案1】：

您不应该使用两个折叠 div。如果您只取出第二个折叠 div，您可以看到它起作用。下面的小提琴示例：

<nav class="navbar navbar-expand-lg navbar-light bg-light" style="margin-bottom:30px">
  <a class="navbar-brand" href="#">Website name</a>
  <button class="navbar-toggler" 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>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Start <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 2 </a>
      </li>
    </ul>
    <ul class="navbar-nav ml-auto">
      <li class="nav-item">
        <a class="nav-link" href="signup">Register</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="login">Log in</a>
      </li>
    </ul>
  </div>

https://jsfiddle.net/Mikkal24/15ne7h85/

【讨论】：