Navbar 品牌有什么问题？答案

【问题标题】：what's wrong with Navbar brand?Navbar 品牌有什么问题？
【发布时间】：2022-01-11 06:52:05
【问题描述】：

我正在编写导航栏代码，但我无法将字体大小应用于导航栏品牌，也无法在导航栏底部填充 . -----HTML代码-----

<section id="title">
    <div class="container-fluid">
      <!-- Nav Bar -->
      <nav class="navbar navbar-expand-lg navbar-dark">
        <a class="navbar-brand" href="">Tindog</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item">
              <a class="nav-link" href="">Contact</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="">Pricing</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="">Download</a>
            </li>
          </ul>
        </div>
      </nav>

。 ------css代码----- .

.navbar{
  padding-bottom: 4.5rem;
}

.navbar-brand{
  font-family: "Ubuntu";
  font-size: 2.5rem;
  font-weight: bold;
}

【问题讨论】：

我将您的代码放入了一个codepen，它似乎按预期工作？您是否可能有一些干扰的替代 CSS 样式，例如引导程序？

标签： html css navbar

【解决方案1】：

在使用 Bootstrap 时，您应该使用重要信息，例如 : !important 来设置默认类的样式。

    .nav{
        padding-bottom: 4.5rem !important;
      }
      
      .navbar-brand{
        font-family: "Ubuntu";
        font-size: 2.5rem !important;
        font-weight: bold;
      }

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
      <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container-fluid">
          <a class="navbar-brand" href="#">Tindog</a>
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                  <a class="nav-link" href="">Contact</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="">Pricing</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="">Download</a>
                </li>
              </ul>

          </div>
        </div>
      </nav>
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

【讨论】：