如何更改 bootstrap 中的导航栏高度？

Question

我正在重新创建 mac OS 导航栏并想调整导航栏高度和文本大小（大约 12 像素）。这是我第一次使用 bootstrap，所以请提供任何帮助。另外，让我知道除了他们的网站之外，我还能在哪里找到有关如何使用 bootstrap 的信息。

 <body>
    <nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark">
      <div class="collapse navbar-collapse" id="navbarNavDropdown">
        <ul class="navbar-nav">
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              <i class="fa-solid fa-power-off"></i>
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
              <a class="dropdown-item" href="#">About ziko OS</a>
              <a class="dropdown-item" href="#">Settings</a>
              <a class="dropdown-item" href="#">Log out</a>
            </div>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              File</a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
              <a class="dropdown-item" href="#">Open</a>
              <a class="dropdown-item" href="#">Close Window</a>
              <a class="dropdown-item" href="#">Get info</a>
              <a class="dropdown-item" href="#">Move to trash</a>
              <a class="dropdown-item" href="#">Find</a>
            </div>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Edit</a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
              <a class="dropdown-item" href="#">Undo</a>
              <a class="dropdown-item" href="#">Redo</a>
              <a class="dropdown-item" href="#">Cut</a>
              <a class="dropdown-item" href="#">Copy</a>
              <a class="dropdown-item" href="#">Paste</a>
              <a class="dropdown-item" href="#">Select All</a>
              <a class="dropdown-item" href="#">Emojis & Symbols</a>
            </div>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Help</a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
              <a class="dropdown-item" href="#">ziko OS help</a>
              <a class="dropdown-item" href="#">Search</a>
            </div>
          </li>
        </ul>
      </div>
    </nav>
  </body>

Answer 1

基本上你需要给导航栏添加 css 高度 class。

 <style>
.navbar{ height: 48px;}
.navbar a{font-size:12px;}
</style>

请检查此代码窗格Demo

如何更改 bootstrap 中的导航栏高度？

How can I change the navbar height in bootstrap?

html

css

macos

navbar

bootstrap-4