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

这是我链接的文档