CSS 如何在 Bootstrap 4 中降低导航栏高度？

How do you decrease navbar height in Bootstrap 4?

提问by ua_boaz

Below is my code for bootstrap 4

下面是我的引导程序 4 代码

 <nav class="navbar navbar-collapse navbar-toggleable-md navbar-light bg-faded ">
    <div class="collapse navbar-collapse" id="navbarText">
      <ul class="navbar-nav mr-auto">

        <li class="nav-item">

          <a class="nav-link " >
            <span  class="icon icon18 icon-upload"></span>
            Input Data From Prior Month
            </a>
        </li>
        <li class="nav-item">
          <a class="nav-link " >
            <span  class="icon icon18 icon-excel-file"></span>
            Export to Excel
          </a>
        </li>
      </ul>
      <span class="navbar-text color-blue">
        *Data Automatically pulled from sources
      </span>
    </div>
   </nav>

there are various examples given for bootstrap 3 here How do you decrease navbar height in Bootstrap 3?but none of them seem to work for bootstrap 4, can anyone help with this one?

此处为 bootstrap 3 提供了各种示例 如何降低 Bootstrap 3 中的导航栏高度？但它们似乎都不适用于 bootstrap 4，有人可以帮忙解决这个问题吗？

回答by Zim

Decreasing the Navbar height is easier in Bootstrap 4 using the spacing utils. The height of the navbar comes from padding in the Navbar contents.

在 Bootstrap 4 中使用间距 utils更容易降低导航栏高度。导航栏的高度来自导航栏内容中的填充。

Just use py-0in the nav-linkand navbar-text..

只需py-0在nav-link和navbar-text..

<nav class="navbar navbar-collapse navbar-toggleable-md navbar-light bg-faded ">
    <div class="collapse navbar-collapse" id="navbarText">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item">
                <a class="nav-link py-0">
                    <span class="icon icon18 icon-upload"></span> Input Data From Prior Month
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link py-0">
                    <span class="icon icon18 icon-excel-file"></span> Export to Excel
                </a>
            </li>
        </ul>
        <span class="navbar-text py-0 color-blue">
        *Data Automatically pulled from sources
      </span>
    </div>
</nav>

The py-0class sets padding-top:0;padding-bottom:0on the items.

该py-0班台padding-top:0;padding-bottom:0的项目。

Bootstrap 4 Navbar Shrink Height

Bootstrap 4 导航栏收缩高度

回答by Dush

If anyone like changing CSS to get the same result, try this method. In my case I have just changed the .navbarmin-heightand the links font-sizeand it decreased the navbar.

如果有人喜欢更改 CSS 以获得相同的结果，请尝试此方法。就我而言，我刚刚更改.navbarmin-height了链接font-size并减少了导航栏。

For example:

例如：

.navbar{
    min-height:12px;
}
.navbar  a {
    font-size: 11.2px;
}

And this also worked for increasing the navbar height.

这也适用于增加导航栏高度。

This also helps to change the navbar size when scrolling down the browser.

这也有助于在向下滚动浏览器时更改导航栏大小。