Почему я не могу работать с загруженным bootstrap - PullRequest
1 голос
/ 10 марта 2020

Я скачал Скомпилированную CSS и JS версию bootstrap по этой ссылке . разархивировал его внутри моего каталога root проекта и сослался на них внутри моего html файла. Мой html файл теперь выглядит так:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Todo Maker</title>
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
    <nav class="navbar navbar-inverse">
    <div class="container-fluid">
        <div class="navbar-header">
        <a class="navbar-brand" href="#">WebSiteName</a>
        </div>
        <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Page 1</a></li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
        </ul>
    </div>
    </nav>
</body>

<script src="bootstrap/js/bootstrap.min.js"></script>

</html>

Теперь, если я запустил страницу, он не будет правильно отображать панель навигации bootstrap. Вот как это выглядит снимок экрана

Но если я использую cdn для bootstrap css и js, тогда он отлично работает.

Что я делаю неправильно ?

===== edit ========

После некоторого осмотра я вижу, что не могу найти стили bootstrap в bootstrap .min . css или в bootstrap. css файлах, которые я скачал. Например, я не могу найти стиль для класса .navbar-inverse .

Ответы [ 2 ]

1 голос
/ 10 марта 2020

Вам нужно иметь .navbar-expand или .navbar-expand{-sm|-md|-lg|-xl} имя класса в вашем элементе <nav>, чтобы стиль bootstrap работал.

Затем вам также необходимо добавить правильные имена классов для ссылок nav, например:

      <li class="nav-item">
        <a class="nav-link" href="#">Page 1</a>
      </li>

. Подробнее можно прочитать здесь: https://getbootstrap.com/docs/4.0/components/navbar/

0 голосов
/ 10 марта 2020

Bootstrap 4 не имеет класса navbar-inverse. Это BS3. Ваш пример кода выглядит хорошо, когда я запускаю его под BS3, но неверен, и как ваш образ, когда я запускаю его с BS4.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...