twitter-bootstrap Bootstrap 4：当徽标增加导航栏高度时垂直对齐导航链接
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35433865/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 4 : Vertically Align Navigation Links when Logo Increases the Navbar Height
提问by Paper9oll
I'm new to the Bootstrap 4 framework, but even after reading all the documentation and all the existing B4 questions on StackOverFlow, I'm still a bit stuck.
我是 Bootstrap 4 框架的新手，但即使在阅读了 StackOverFlow 上的所有文档和所有现有的 B4 问题之后，我仍然有点卡住了。
In my navigation bar, I inserted a SVG logo that has a height and width of 50px. This automatically makes the navbar taller. I have not adjusted any CSS for this, it is simply the logo that is forcing the navbar height to increased.
在我的导航栏中，我插入了一个高度和宽度为 50 像素的 SVG 徽标。这会自动使导航栏更高。我没有为此调整任何 CSS，它只是迫使导航栏高度增加的标志。
Here is my HTML:
这是我的 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">
☰
</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>
Here is my Custom CSS:
这是我的自定义 CSS：
.navbar-brand {
font-size: 22px;
img {
display: inline-block;
margin-right: 8px;
width: 50px;
height: 50px;
}
}
I'd like the navigation links which is link1, link2, & link3to be vertically align to the title which is Bootstrap.
我想的导航链接是链接1，链接2，与LINK3是在标题是垂直对齐引导。
Thanks You in Advance
提前谢谢你
采纳答案by max
I think you can remove top and bottom padding from links and add height and line-height to it. Also remove padding from .navbar-brand.
我认为您可以从链接中删除顶部和底部填充并为其添加高度和行高。同时从.navbar-brand.
Just add this CSS:
只需添加这个CSS：
.navbar-brand {
padding: 0;
}
.navbar-nav .nav-link {
padding-top: 0;
padding-bottom: 0;
height: 50px;
line-height: 50px;
}
CODEPEN
代码笔
回答by Alexander Romero
I ran into a similar situation where I'd like to vertically align my nav-items.
我遇到了类似的情况，我想垂直对齐我的导航项目。
Step 1:Add the classes d-lg-flex align-items-centerto your .navbar-navparent element. This ensures that you can align child items using flex-utilities
步骤 1：将类添加d-lg-flex align-items-center到您的.navbar-nav父元素。这确保您可以使用 flex-utilities 对齐子项
Step 2:Add the h-100class to each child nav-item. Nav-item has no defined height that I'm aware of. With nav-item's defined height, it will follow the flex rules set above by align-items-center.
第 2 步：将h-100类添加到每个孩子nav-item。导航项没有我所知道的定义高度。使用nav-item的定义高度，它将遵循上面设置的 flex 规则align-items-center。
Step 3:Please check my external links in my codepen because the navbar requires additional js.
第 3 步：请检查我的代码笔中的外部链接，因为导航栏需要额外的 js。
Here is a working example of vertically centered nav-items https://codepen.io/b3bold/pen/rvMwzN
这是垂直居中导航项目的工作示例 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>
回答by Tanvir Bhanot
Try this.
试试这个。
<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>
