首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >左边的引导导航条对象不会显示在移动设备上

左边的引导导航条对象不会显示在移动设备上
EN

Stack Overflow用户
提问于 2018-05-01 18:58:19
回答 1查看 35关注 0票数 1

由于某些原因,我在左边放置的引导导航条按钮不会显示在我的手机上(右边的按钮:"Home“和"Link 2",工作得很好)。具体而言,“注册表”和“登录”按钮被打破。

代码语言:javascript
复制
<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>

谢谢!

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-05-01 19:10:01

你不应该使用两个崩溃的div。如果你拿出第二个塌陷点,你可以看到它是有效的。小提琴例子如下:

代码语言:javascript
复制
<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/

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/50122249

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档