Question

以下是我的bootstrap 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>

这里给出了bootstrap 3的各种示例 How do you decrease navbar height in Bootstrap 3? 但是它们似乎都没有用于bootstrap 4，任何人都可以帮助这个吗？

Answer 1

使用spacing utils在Bootstrap 4中减少Navbar高度更容易。导航栏的高度来自Navbar内容中的填充。

只需在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>

py-0课程对项目设置padding-top:0;padding-bottom:0。

Bootstrap 4 Navbar Shrink Height

Answer 2

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

例如：

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

这也有助于增加导航栏的高度。

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

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

2 个答案: