Question

我一直试图弄清楚这几个小时。我不确定它是Bootstrap 4的问题还是我的语法有问题。当Navbar折叠时，下一个li显示在导航栏品牌文本的右侧，而不是像所有其他项目一样。

<nav class="navbar navbar-fixed-top navbar-dark bg-primary">
            <div class="container">
              <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2" aria-controls="exCollapsingNavbar2" aria-expanded="false" aria-label="Toggle navigation">
                &#9776;
              </button>
              <div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar2">
                <div class="nav-item">
                  <a class="navbar-brand nav-link" href="#">IMGS</a>
                </div>

                <ul class="nav navbar-nav">

                  <li class="nav-item">
                    <a class="nav-link" href="#">About</a>
                  </li>

                  <li class="nav-item">
                    <a class="nav-link" href="#">Contact</a>
                  </li>
                </ul>

                <ul class="nav navbar-nav pull-sm-right">
                 <li class="nav-item">
                    <a class="nav-item nav-link" href="#">Sign Up</a>
                 </li> 
                 <li class="nav-item">
                    <a class="nav-item nav-link" href="#">Login</a>
                 </li>
                </ul>
              </div>
            </nav>

我还添加了一个codepen http://codepen.io/NachoSupreme/pen/xEgwJz。有人可以帮忙吗？

Answer 1

我假设你并不意味着这个品牌要包装在汉堡里面。如果你问我，这是正确的用户界面。

试试这个

<nav class="navbar navbar-fixed-top navbar-dark bg-primary">
<div class="container">
  <a class="navbar-brand nav-link" href="#">IMGS</a>
  <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2" aria-controls="exCollapsingNavbar2" aria-expanded="false" aria-label="Toggle navigation">
    &#9776;
  </button>
  <div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar2">
    <div class="nav-item">

    </div>

    <ul class="nav navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>

      <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>
      </li>
    </ul>

    <ul class="nav navbar-nav pull-sm-right">
     <li class="nav-item">
        <a class="nav-item nav-link" href="#">Sign Up</a>
     </li> 
     <li class="nav-item">
        <a class="nav-item nav-link" href="#">Login</a>
     </li>
    </ul>
  </div>
</nav>

Bootstrap 4：当导航栏折叠时，li项目水平显示在navbar-brand旁边

1 个答案: