Question

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

简而言之，我正在创建一个导航栏，我正在尝试在右侧添加一个链接。根据{{3}}，.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。课程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>

工作示例：

＆＃13;

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

＆＃13;

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

＆＃13;

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>

这是来自我链接的文档

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

2 个答案: