我有一个像这样的bootstrap 4导航栏:
<nav class="navbar navbar-light bg-faded navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<!-- Toggle Button -->
<button type="button" class="navbar-toggler hidden-md-up"
data-toggle="collapse"
data-target="#nav-content"
aria-expanded="false">
<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="#">THE VEGAN REPOSITORY</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-toggleable-md" id="nav-content">
<ul class="nav navbar-nav pull-xs-right">
<li class="nav-item">
<a class="nav-link" href="#home_page_footer">
<h5 class=" nav-item clickable white-text medium-text
right-text">
ABOUT
</h5>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#home_page_footer">
<h5 class=" nav-item clickable white-text medium-text
right-text">
BLOG
</h5>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="http://www.w3schools.com">
<h5 class=" nav-item clickable white-text medium-text
right-text">
LOGIN
</h5>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="http://www.w3schools.com">
<h5 id=" sign-in-button" class="nav-item clickable
medium-text right-text">
SIGN UP FREE
</h5>
</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<nav class="navbar navbar-light bg-faded">
<!-- Toggle Button -->
<button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#nav-content">
</button>
</nav>
我想更改导航栏的高度,但是当我这样做时,链接不再垂直居中。
70像素
我尝试过line-height和flexbox选项,例如
nav {
background-color: $brand-red;
height:70px;
display: flex;
align-items: center;
}
确实:
我用于整个导航栏的唯一css是:
nav {
background-color: #fc4747;
height: 70px;
display: flex;
align-items: center; }
如果导航栏高70像素,我如何垂直居中导航栏项?导航栏的默认高度略小,约为50px。
答案 0 :(得分:4)
所以我想我会在这里解决一些问题,但首先是你的问题。如果您只想更改导航栏的高度而不是向导航栏添加特定高度,您可以在导航栏中添加额外的填充以获得所需的高度,然后您就不必更改一堆css整个导航栏的其余部分。所以这样做应该让导航栏的高度为70px。
.navbar{padding:1rem}
以下是我在帖子Fiddle Demo
中发表的所有内容的小提琴在这个小提琴演示中,我还添加了一些响应式样式,用于在折叠宽度处堆叠导航栏链接。
下一步如果您要为导航设置背景颜色,则没有理由将bg-faded
类用于导航,因为这只会为您提供导航的背景颜色,以便您可以从中删除该类你的导航。
然后,我会在您的课程中看到您的导航链接,您有一个white-text
课程。如果您想要导航栏的白色文字,则可以使用navbar-dark
类,这样可以为导航栏提供更轻的文本,而不是使用navbar-light
。我想我会指出这一点。
下一步在bootstrap 4中没有navbar-header
类,所以除非你在这里计划自定义样式,否则没有必要这样做。并且navbar-toggler
按钮在bootstrap 4中不同,没有icon-bar
跨度,他们现在只使用html代码☰
注意:解决我的一个巨大的烦恼,你的导航栏中有h5标签。不知道为什么会这样,但我看到人们这么做了。 H标签应该按从h1到h6的顺序使用,并且应该与您所在的页面直接相关,而不是与整个站点相关。如果你有充分的理由进行这种练习,那么请务必将它们留在那里,但我不确定为什么我会看到人们一直这样做。对我而言,这是一个不好的做法,我想我会解决这个问题。