我是Bootstrap 4框架的新手，但是即使阅读了所有文档以及StackOverFlow上所有现有的B4问题，我仍然有些卡住。
在导航栏中，插入了一个高度和宽度为50px的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">
☰
</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垂直对齐。
提前谢谢你
我认为您可以从链接中删除顶部和底部填充，并为其添加高度和线高。同时从中删除填充.navbar-brand。
只需添加以下CSS：
.navbar-brand {
padding: 0;
}
.navbar-nav .nav-link {
padding-top: 0;
padding-bottom: 0;
height: 50px;
line-height: 50px;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句