容器流体填充在 css 中不起作用，导航栏品牌 css 不起作用答案

【问题标题】：Container-fluid padding is not working in css and navbar brand css not working容器流体填充在 css 中不起作用，导航栏品牌 css 不起作用
【发布时间】：2020-09-09 07:28:04
【问题描述】：

    <!DOCTYPE html>
    <html>

    <head>
      <meta charset="utf-8">
      <title>TinDog</title>
      <link rel="stylesheet" href="css/styles.css">
      <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
      <link href="https://fonts.googleapis.com/css2?family=Ubuntu&display=swap" rel="stylesheet">
      <link href="https://fonts.googleapis.com/css2?family=Montserrat&family=Ubuntu&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>

    </head>

    <body>
      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

      <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>
</section>
</body>

</html>



    .container-fluid
{
  padding-left: 150px;
  padding-right: 150px;

}
.navbar-brand
{
  font-family: 'Ubuntu', sans-serif;
  font-size: 32px:
}

上面的 CSS 没有为容器流体提供填充，它采用默认填充，当我以百分比添加它时，即使我在 HTML 中设置代码样式，填充也会被取消。使用容器也不会改善这种情况，填充也会被取消。该代码在 codeply.com 中有效，但在 atom 中无效。 navbar品牌的字体大小也没有变化，rem、px、%都试过了，还是没有变化。

【问题讨论】：

我没有看到您在 HTML 代码中使用了“.container-fluid”。
它已经在代码中但没有出现，我的错。我编辑了代码，如果不可见，请在引导程序的容器流体类中考虑它。
尝试用大数字填充，看看显示的结果是什么
@burningknight 您是否在项目中包含了引导程序？是否引导工作
确保在引导 css 文件之后加载了自定义 CSS 文件。浏览器读取的 CSS 将覆盖前一个。

标签： html css

【解决方案1】：

您应该尝试这些步骤 -

清除浏览器的 cookie 和数据
尝试将!important 添加到css 属性中，如下所示-

.container-fluid { padding-left: 150px !important; padding-right: 150px !important; }

PS- 确保您已将引导程序包含到您的代码中。

【讨论】：

【解决方案2】：

尝试将引导链接移到您的 styles.css 文件上方，因为这应该是分层顺序。然后将应用默认引导样式。

【讨论】：

【解决方案3】：

在部分之前或导航之后关闭您的容器流体。你没有关闭它。

【讨论】：