css - 更正 Bootstrap 4 中导航栏链接的垂直对齐

Question

我在 Rails 应用程序中遇到了 Bootstrap 4 的 .navbar 类的奇怪问题。

简而言之，我正在制作一个导航栏，我正在尝试在右侧添加一个链接。根据the documentation , .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 混合使用，而没有使用 documentation 中的默认导航结构。 ，特别是这个:见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>