Bootstrap导航链接方式不合适

Question

我有一个导航栏（使用bootstrap 4 css），我有3个链接和一个品牌。

我希望所有这些都符合要求，但出于某种原因，他们到处都是。

这是它的样子：

这是我目前的代码：

<nav class="navbar navbar-fixed-top">

  <!-- Toggle Button -->
  <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#nav-content">
    ☰
  </button>

  <!-- Nav Content -->
  <div class="collapse navbar-toggleable-xs" id="nav-content">
    <a class="navbar-brand" href="#">Logo</a>
    <ul class="nav navbar-nav">
      <li><a href="#search">Search <i class="fa fa-search" aria-hidden="true"></i></a>
      </li>
    </ul>
    <ul class="nav navbar-nav pull-sm-right pull-md-right pull-lg-right">
      <li class="nav-item">
        <a class="nav-link" href="#">Sign Up</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Log In</a>
      </li>
    </ul>
  </div>

</nav>

<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
  <div class="container">
    <p class="text-center">Play button will go here when video is implemented</p>
    <div class="col-xs-12 text-center">
      <a class="btn btn-primary btn-lg" href="#" role="button">Earn now! &raquo;</a> 
    </div>
  </div>
</div>

我使用proxima nova作为我的字体，是的，从来没有发生过这种情况，任何想法？

Answer 1

请务必在搜索链接中使用nav-item和nav-link ...

  <ul class="nav navbar-nav">
      <li class="nav-item"><a href="#search" class="nav-link" >Search <i class="fa fa-search" aria-hidden="true"></i></a>
      </li>
  </ul>

http://www.codeply.com/go/QYgdMWVyki

此外，此时Bootstrap 4处于alpha状态，因此正在进行中。

Answer 2

您是否尝试使用单个'ul class =“nav navbar-nav”'作为导航栏并将“pull”直接放在“li”标签上？ ：）

Answer 3

试试这个： 我已将pull-md-left类添加到第一个navbar-nav。

<nav class="navbar navbar-fixed-top">

  <!-- Toggle Button -->
  <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#nav-content">
    ☰
  </button>

  <!-- Nav Content -->
  <div class="collapse navbar-toggleable-xs" id="nav-content">
    <a class="navbar-brand" href="#">Logo</a>
    <ul class="nav navbar-nav pull-md-left">
      <li class="nav-item">
         <a href="#search" class="nav-link">Search <i class="fa fa-search" aria-hidden="true"></i></a>
      </li>
    </ul>
    <ul class="nav navbar-nav pull-sm-right pull-md-right pull-lg-right">
      <li class="nav-item">
        <a class="nav-link" href="#">Sign Up</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Log In</a>
      </li>
    </ul>
  </div>

</nav>

<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
  <div class="container">
    <p class="text-center">Play button will go here when video is implemented</p>
    <div class="col-xs-12 text-center">
      <a class="btn btn-primary btn-lg" href="#" role="button">Earn now! &raquo;</a> 
    </div>
  </div>
</div>