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

debugcn 发表于 Dev

暗黑的

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

简而言之，我正在制作导航栏，并尝试在右侧添加链接。根据文档，.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魔术，正确的链接也不会垂直居中（靠近顶部）。

有什么想法为什么会这样？

来自邻居

似乎您在将Bootstrap v3类与v4混合使用，而没有使用文档中提供的默认导航结构，尤其是：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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。