html - bootstrap 4 更改导航栏高度导致导航栏元素不垂直居中

Question

我有一个像这样的 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 像素

我尝试过行高和 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 像素高，我如何垂直居中导航栏元素？导航栏的默认高度稍小，大约 50 像素。

Answer 1

所以我想我会在这里解决一些问题，但首先是关于您的问题。如果您只想更改导航栏的高度而不是向导航栏添加特定高度，您只需向导航栏添加额外的填充即可为您提供所需的高度，然后您就不必在整个过程中更改一堆 css导航栏的其余部分。所以这样做应该给导航栏一个 70px 的高度。

.navbar{padding:1rem}

这是我在这篇文章中提到的所有内容的 fiddle Fiddle Demo

在这个 fiddle 演示中，我还添加了一些响应式样式，用于在折叠宽度处堆叠导航栏链接。

Next 如果您要为导航设置背景颜色，则没有理由对导航使用 bg-faded 类，因为这只会为您提供导航的背景颜色，因此您可以从您的导航中删除该类。

然后我在您的导航链接类中看到您有一个 white-text 类。如果您想要导航栏的白色文本，您可以只使用 navbar-dark 类，这将为您提供较浅的导航栏文本，而不是使用 navbar-light。只是想我会指出这一点。

Next 在 bootstrap 4 中没有 navbar-header 类，所以这不是必需的，除非你打算在这里自定义样式。 navbar-toggler 按钮在 bootstrap 4 中是不同的，没有 icon-bar 跨度，他们现在只使用 html 代码 ☰

注意:解决我的一个巨大的烦恼，你的导航栏中有 h5 标签。不知道为什么会这样，但我看到人们经常这样做。 H 标签应该按从 h1 到 h6 的顺序使用，并且应该与您所在的页面直接相关，而不是与整个站点相关。如果你有充分的理由进行这种做法，那么一定要把它们留在那里，但我不确定为什么我总是看到人们这样做。对我来说，这是一个不好的做法，我只是想解决这个问题。