Question

我正在使用Bootstrap 4，但是我的CSS文件无法正常工作。

我想为此导航栏留出空间

<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-bottom">
<div class="container">
  <a class="navbar-brand" href="#">Start Bootstrap</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarResponsive">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home
          <span class="sr-only">(current)</span>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Services</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>
      </li>
    </ul>
  </div>
</div>

我添加了以下代码：

.navbar-nav>li{margin-right:20px;margin-left:20px;}

它工作，但仅当我将代码放在索引文件的meta标签上时，但将代码放在bootstrap.min.css上时不起作用，即使我将CSS文件放在正确的目录中。

<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="all">

这怎么发生？

.fixed-bottom类如何在不链接CSS文件的情况下影响我的导航代码？ .fixed-bottom类在bootstrap.css上，该行在meta标签上不存在，只有bootstrap.min。

Answer 1

我尝试了一下，它工作正常，您可以创建第二个CSS文件来包含您的自定义规则（也许是custom.css），我认为在插件CSS内插入自定义代码不是一个好习惯。

.fixed-bottom类如何对我的导航代码产生影响，尽管没有css文件的代码链接（.fixed-bottom类位于bootstrap.css上，但meta标记上不存在这些行，只有bootstrap.min）

这是因为bootstrap.css和bootstrap.min.css之间没有区别，文件内的CSS规则是相同的，仅压缩“ min”一项以提高性能。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<style>
.navbar-nav>li{margin-right:20px;margin-left:20px;}
</style>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-bottom">
<div class="container">
  <a class="navbar-brand" href="#">Start Bootstrap</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarResponsive">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home
          <span class="sr-only">(current)</span>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Services</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>
      </li>
    </ul>
  </div>
</div>

Answer 2

请勿编辑bootstrap.min.css。否则，当出现新版本时，您必须重新创建所做的任何更改。分别编写自己的CSS ，并将其包含在引导程序之后，以便您编写的任何内容都将覆盖Bootstrap（在层叠样式表中为“层叠”）。

还考虑使用内容分发网络（Look for "Bootstrap CDN" here），这样，如果有人访问过另一个使用Bootstrap的网站，则无需再次下载它即可使用您的网站。

Bootstrap 4 CSS未应用

2 个答案: