在Bootstrap 4中更正導航欄鏈接的垂直對齊

Question

我在Rails應用程序中遇到了Bootstrap 4的.navbar類的奇怪問題。

簡而言之，我正在制作導航欄，並嘗試在右側添加鏈接。 根據文檔 ， .pull-**-right類應在導航.pull-**-right工作，並將鏈接放在右側。

現在它成功地做到了； 但是，垂直對齊方式已關閉（即使左側的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

似乎您正在將Bootstrap v3類與v4混合使用，而不使用文檔中提供的默認導航結構，尤其是： Nav 。 並且v4中不存在navbar-header類。

希望這會有所幫助。

基本設定

.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;
}

只需刪除鏈接中的類並保留類navbar-brand或參考文檔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>

這是我鏈接的文檔