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

用户9651887

由于某些原因,我无法弄清楚,当我在手机上时,放在左侧的引导导航按钮将不会显示(右侧的按钮分别是“ Home”和“ Link 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>

谢谢!

迈克尔·索伦森

您不应该使用两个折叠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/

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

Bootstrap-导航栏不会在移动设备上显示

Wordpress 不会在移动设备上显示部分 css

引导导航栏-仅在移动设备上显示子菜单

导航导航栏导航栏右下拉菜单内容不会在移动设备上下推菜单项

Bootstrap 导航栏不会在移动视图上折叠

引导导航不会在小屏幕上崩溃

Foundation 5 Top Navbar不会在移动设备上显示

Facebook图形用户图片不会在移动设备上显示

Cardview在预览中可以,但不会在移动设备上显示

UISearchController不会在旋转时重新显示导航栏

导航栏未显示在移动设备上

颜色不会在Bootstrap导航栏上更改

翻转卡不会在移动设备上翻转

网站不会在移动设备上向右或向左滚动

仅在移动设备上滚动到顶部时显示导航栏(引导程序4)

导航栏引导菜单未显示在移动设备中

某些设备不会在Google Play上显示APK

移动设备上的水平对齐导航栏元素-引导3

Twitter Bootstrap 3导航栏在移动设备上不会崩溃

Bootstrap 4搜索导航栏未显示在移动设备上

我的导航栏未显示在移动设备上

链接下划线不会在导航栏上删除

文字不会在第二个导航栏上对齐

Bootstrap CSS 4.0 导航栏不会在桌面浏览器上显示菜单并且总是折叠/显示汉堡菜单

Linux内核不会在其系统上加载可移动设备

Bootstrap Select不会在移动设备上触发更改事件

用JavaScript创建的模态不会在移动设备上消失

Angularfire2身份验证订阅不会在移动设备上触发

网站不会在移动设备上滚动,而只能在桌面上滚动