Bootstrap 4：当徽标增加导航栏高度时垂直对齐导航链接答案

【问题标题】：Bootstrap 4 : Vertically Align Navigation Links when Logo Increases the Navbar HeightBootstrap 4：当徽标增加导航栏高度时垂直对齐导航链接
【发布时间】：2016-02-16 13:25:04
【问题描述】：

我是 Bootstrap 4 框架的新手，但即使在阅读了 StackOverFlow 上的所有文档和所有现有 B4 问题之后，我仍然有点卡住。

在我的导航栏中，我插入了一个高度和宽度为 50 像素的 SVG 徽标。这会自动使导航栏更高。我没有为此调整任何 CSS，它只是强制导航栏高度增加的徽标。

这是我的 HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
    <title>@yield('title')</title>
    <link rel="import" href="elements.html">
    <link rel="stylesheet" href="/styles/app.css">
</head>
<body>
    <header class="navbar navbar-light navbar-fixed-top bd-faded">
        <div class="clearfix hidden-sm-up">
            <button class="navbar-toggler pull-right" data-toggle="collapse" data-target="#navbar">
                    &#9776;
                </button>
            <a href="/" class="navbar-brand">
                <img src="/images/brand.svg" alt="Logo">
                <span>Bootstrap</span>
            </a>
        </div>
        <div class="collapse navbar-toggleable-xs" id="navbar">
            <a href="/" class="navbar-brand">
                <img src="/images/brand.svg" alt="Logo">
                <span>Bootstrap</span>
            </a>
            <nav class="nav navbar-nav">
                <div class="nav-item nav-link"><a href="#">Link 1</a></div>
                <div class="nav-item nav-link"><a href="#">Link 2</a></div>
                <div class="nav-item nav-link"><a href="#">Link 3</a></div>
            </nav>
        </div>
    </header>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script src="/scripts/vendor.js"></script>
    <script src="/scripts/bootstrap.js"></script>
    <script src="/scripts/app.js"></script>
    <script src="/components/webcomponentsjs/webcomponents.js"></script>
</body>
</html>

这是我的自定义 CSS：

.navbar-brand {
    font-size: 22px;
    img {
        display: inline-block;
        margin-right: 8px;
        width: 50px;
        height: 50px;
    }
}

我希望导航链接 link1、link2 和 link3 垂直对齐到标题 Bootstrap。

提前谢谢你

【问题讨论】：

徽标下方有“Bootstrap”这个标题还是只有徽标？
@makshh 我同时拥有 logo + 标题，目前是“Bootstrap”......它位于 logo 的右侧

标签： css twitter-bootstrap twitter-bootstrap-4 bootstrap-4

【解决方案1】：

我遇到了类似的情况，我想垂直对齐导航项。

第 1 步： 将类 d-lg-flex align-items-center 添加到您的 .navbar-nav 父元素。这确保您可以使用 flex-utilities 对齐子项

第 2 步： 将 h-100 类添加到每个子 nav-item。 Nav-item 没有我知道的定义高度。使用nav-item 定义的高度，它将遵循上面align-items-center 设置的弹性规则。

第 3 步：请检查我的 codepen 中的外部链接，因为导航栏需要额外的 js。

这是一个垂直居中导航项的工作示例 https://codepen.io/b3bold/pen/rvMwzN

<nav class="navbar navbar-expand-md p-3 mb-2 navbar-light bg-white text-dark">   
  <a class="navbar-brand" href="#">
    <img src="https://i.stack.imgur.com/snRuy.jpg" />
  </a>

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav ml-auto text-center w-100 justify-content-between ml-lg-0 d-lg-flex align-items-center">
      <div class="nav-item h-100"><a class="nav-link" href="#">RandomLink</a></div>
      <div class="nav-item h-100"><a class="nav-link"href="#">Some Really Long Link as an Example of Vertical </a></div>
      <div class="nav-item h-100"><a class="nav-link" href="#">RandomLink</a></div>
      <div class="nav-item h-100"><a class="nav-link" href="#">RandomLink</a></div>
      <div class="nav-item h-100"><a class="nav-link" href="#">RandomLink</a></div>
    </ul>
  </div>
</nav>

【讨论】：

【解决方案2】：

我认为您可以从链接中删除顶部和底部填充，并为其添加高度和行高。同时从.navbar-brand 中删除填充。

只需添加这个 CSS：

.navbar-brand {
  padding: 0;
}
.navbar-nav .nav-link {
  padding-top: 0;
  padding-bottom: 0;
  height: 50px;
  line-height: 50px;
}

CODEPEN

【讨论】：

这也是我的第一个解决方案，直到我意识到这将是由“格式错误”标记或用于违反 B4 意图的标记引起的“黑客攻击”——我主要考虑的是响应能力。
同意上面的评论，我想避免额外的css样式。
谢谢。使用导航链接的底部填充有助于将链接对齐到我品牌上的特定高度（这是一个徽标，而不是文本）。
设置高度和行高就可以了

【解决方案3】：

我正在使用 Bootstrap 4.5.0。对我来说，以下是诀窍（除了上面提到的@Alexander Romero 之外，我还必须添加 mt-2）：

        <li class="nav-item dropdown align-items-center mt-2"><select class="dropdown" id="changeAccentColor">
            <option value="">Theme</option>
            <option value="">Default</option>
            <option value="#F5FFFA">Mint</option>
            <option value="#32CD32">Lime</option>
            <option value="#008080">Teal</option>
            <option value="#DCDCDC">Gray</option>
            <option value="#FFC0CB">Pink</option>
            <option value="#F5F5F5">Smoky</option>
        </select></li>

现在，即使我放大 400-500%，我的自定义下拉菜单仍与我为导航设置的高度垂直对齐。它完美无缺。希望有人会发现它对满足他们的需求很有用。

【讨论】：

【解决方案4】：

试试这个。

 <header class="navbar navbar-default navbar-top">
                <div class="container">
                    <div class="navbar-header">
                        <!-- Stat Toggle Nav Link For Mobiles -->
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                            <i class="fa fa-bars"></i>
                        </button>
                        <!-- End Toggle Nav Link For Mobiles -->
                        <a class="navbar-brand" href="#">
                            <h3>Bootstrap</h3>
                        </a>
                    </div>
                    <div class="navbar-collapse collapse navbar-right">
                       <!-- Start Navigation List -->
                        <ul class="nav navbar-nav">
                            <li> <a href="#">Link 1</a> </li>
                            <li><a href="#">Link 2</a> </li>
                            <li><a href="#">Link 3</a></li>
                        </ul>
                        <!-- End Navigation List -->
                    </div>
                </div>
      </header>

【讨论】：

这是 Bootstrap 4 的问题，因为我没有看到 navbar-nav 内的 nav-item 和 nav-link 类