Bootstrap 4 CSS не применяется

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;}

Это РАБОТАЕТ , но только когда я помещаю код в метатег индексного файла, но не работает , когда я кладу кодкод файла bootstrap.min.css, даже если я поместил файл CSS в правильный каталог.

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

Как это может произойти?

Как получается класс.фиксированное дно влияет на мой код навигации без ссылки на файл CSS?Класс .fixed-bottom находится в bootstrap.css, строки которого не существуют в метатеге, есть только bootstrap.min.

Answer 1

Я попробовал, и все работает нормально, вы можете создать второй файл CSS, содержащий ваши пользовательские правила (возможно, custom.css), я думаю, что это не очень хорошая практика для вставки пользовательского кода в плагин CSS.

Почему класс .fixed-bottom влияет на мой код навигации даже если нет ссылки на код для файла css (класс .fixed-bottom находится в bootstrap.css, строк которого нет в метатеге, естьтолько 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 (это "Каскад" в каскадных таблицах стилей).

Также учтитес помощью сети доставки контента ( Найдите здесь "100N * Bootstrap CDN", чтобы, если кто-то когда-либо посещал другой сайт, использующий Bootstrap, ему не пришлось загружать его снова, чтобы использовать ваш сайт.