0

ナビゲーションバー (bootstrap 4 css を使用) があり、3 つのリンクと 1 つのブランドがあります。

これらはすべて一列に並んでいると思いますが、何らかの理由であちこちに散らばっています。

これは次のようになります。

ここに画像の説明を入力

そして、ここに私の現在のコードがあります:

<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 をフォントとして使用しています。

4

3 に答える 3

0

これを試してください: 最初の navbar-nav に pull-md-left クラスを追加しました。

<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>
于 2016-06-08T13:01:54.233 に答える
0

単一の 'ul class="nav navbar-nav" ' を navbar に使用して、class' "pull" を 'li' タグに直接配置しようとしましたか? :)

于 2016-06-08T12:54:02.523 に答える