Bootstrap 4のnavbarリンクの垂直方向の整列を修正しました

Question

私のRailsアプリケーションでは、Bootstrap 4の.navbarクラスで奇妙な問題が発生しています。

要するに、私はnavbarを作っており、右側にリンクを追加しようとしています。 the documentationによれば、.pull-**-rightクラスはnavbar内で動作し、リンクを右側に置く必要があります。

これで正常に実行されました。しかし、垂直方向の配置は、（左のnavbar-brandリンクが完璧であっても）オフです：

<nav class="navbar navbar-full navbar-light" style="background-color: #002b52"> 
    <!-- Brand and toggle get grouped for better mobile display --> 
    <div class="navbar-header"> 
    <%= link_to "Example", root_path, class: "navbar-brand" %> 
    <%= link_to "About Us", about_path, class: "pull-sm-right navlink" %> 
    </nav> 
    </div> 
</nav> 

もともとは動作しませんでしたので、私は.navlinkクラスを作ったとしていくつかのCSSを追加しました：

.navlink { 
     vertical-align: middle; 
} 

navbar-brandに余分なCSSマジックがないにもかかわらず、そのようにしても、右のリンクは垂直にセンタリングされません（上部に近い）。

これはなぜ起こっているのですか？

Answer 1

あなたが混合しているようですね。ブートストラップv3クラスv12documentationにあるデフォルトのナビゲーション構造を使用していない、特にこれはNavを参照してください。クラスnavbar-headerはv4には存在しません。

うまくいけば、これが役に立ちます。

基本設定

.navbar 
    a.navbar-brand 
    ul.nav.navbar-nav 
    li.navbar-item 
     a.nav-link 

Railsの例：

<nav class="navbar navbar-full navbar-light"> 

    <%= link_to "Example", root_path, class: "navbar-brand" %> 

    <ul class="nav navbar-nav"> 
    <li class="nav-item pull-sm-right"> 
     <%= link_to "About Us", about_path, class: "nav-link" %> 
    </li> 
    </ul> 

</nav> 

実施例：

.navbar { 
 
    background-color: #002b52; 
 
} 
 
.navbar .navbar-nav li > .nav-link, 
 
.navbar a.navbar-brand { 
 
    color: white; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet" /> 
 
<nav class="navbar navbar-full navbar-light"> 
 

 
    <a class="navbar-brand" href="#">Example</a> 
 

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

 
</nav>

Answer 2

これは、.navbar-brandに余分なクラスがたくさんあるからです。リンクのフォントサイズを変えたいのですか？

.navbar-brand { 
    float: left; 
    height: 50px; 
    padding: 15px 15px; 
    font-size: 18px; 
    line-height: 20px; 
} 

ちょうどリンクオフクラスを削除し、クラスのナビゲーションバーブランドを残すか、ここでドキュメントhttps://getbootstrap.com/components/#navbar

を参照してくださいあなたは、これがどのドキュメントからだっ

<nav class="navbar navbar-default navbar-fixed-top"> 
    <div class="container-fluid"> 
     <div class="navbar-header"> 
      <button aria-expanded="false" class="navbar-toggle collapsed" 
      data-target="#bs-example-navbar-collapse-6" data-toggle= 
      "collapse" type="button"><span class="sr-only">Toggle 
      navigation</span> <span class="icon-bar"></span> <span class= 
      "icon-bar"></span> <span class="icon-bar"></span></button> 
      <a class="navbar-brand" href="#">Brand</a> 
     </div> 
     <div class="collapse navbar-collapse" id= 
     "bs-example-navbar-collapse-6"> 
      <ul class="nav navbar-nav pull-right"> 
       <li class="active"> 
        <a href="#">Home</a> 
       </li> 
       <li> 
        <a href="#">Link</a> 
       </li> 
       <li> 
        <a href="#">Link</a> 
       </li> 
      </ul> 
     </div> 
    </div> 
</nav> 

の後にあるものです私はリンクしました