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

您是否尝试过为您的导航栏使用单个 'ul class="nav navbar-nav" ' 并将 class' "pull" 直接放在您的 'li' 标签上？ :)

Answer 2

试试这个：我已将 pull-md-left class 添加到第一个导航栏导航。

<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>

Answer 3

确保在搜索 link...

中使用 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 阶段，因此它正在进行中。

Bootstrap 导航链接错位

Bootstrap nav links way out of place

html

css

alignment

twitter-bootstrap

twitter-bootstrap-4