Почему Bootstrap переопределяет мой пользовательский CSS?

ProgramBox

Почему Bootstrap переопределяет мой пользовательский CSS?

Post author:admin
Запись опубликована:9 мая, 2023
Post category:Вопросы по программированию

#css #twitter-bootstrap #media-queries

#css #twitter-bootstrap #медиа-запросы

Вопрос:

Моему приложению требуется Bootstrap. Надеясь переопределить стиль начальной загрузки по умолчанию, я сначала загружаю Bootstrap, за которым следует мой пользовательский CSS. Все еще конечный результат отличается. Чего мне не хватает? Вот MWE.

demo.css

 html, body {
    background:#fbf3e8;
}

body {
    margin:0;
    padding:2em 5px;
}

@media (min-width: 640px) {
    body {
        padding:2em;
        font-size:112.5%;
    }

}

index.html

 <!DOCTYPE html>
<html lang="en-US">
<head>
<title>SmartMenus jQuery Website Menu - jQuery Plugin</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

<!-- jQuery -->
<script type="text/javascript" src="../libs/jquery/jquery.js"></script>

<!-- SmartMenus jQuery plugin -->
<script type="text/javascript" src="../jquery.smartmenus.js"></script>

<!-- SmartMenus jQuery init -->
<script type="text/javascript">
    $(function() {
        $('#main-menu').smartmenus({
            subMenusSubOffsetX: 1,
            subMenusSubOffsetY: -8
        });
    });
</script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- SmartMenus core CSS (required) -->
<link href="../css/sm-core-css.css" rel="stylesheet" type="text/css" />

<!-- "sm-blue" menu theme (optional, you can use your own CSS, too) -->
<link href="../css/sm-blue/sm-blue.css" rel="stylesheet" type="text/css" />

<!-- My custom CSS -->
<link href="../libs/demo-assets/demo.css" rel="stylesheet" type="text/css" />

</head>

<body>

<nav id="main-nav" class="navbar navbar-default navbar-fixed-top" role="navigation">
  <ul id="main-menu" class="sm sm-blue" data-smartmenus-id="14772210106692266">
    <li><a href="http://www.smartmenus.org/">Home</a></li>
    <li>
      <a href="http://www.smartmenus.org/about/" class="has-submenu" id="sm-14772210106692266-1" aria-haspopup="true" aria-controls="sm-14772210106692266-2" aria-expanded="false"><span class="sub-arrow"> </span>About</a>
      <ul id="sm-14772210106692266-2" role="group" aria-hidden="true" aria-labelledby="sm-14772210106692266-1" aria-expanded="false">
        <li><a href="http://www.smartmenus.org/about/introduction-to-smartmenus-jquery/">Introduction to SmartMenus jQuery</a></li>
        <li><a href="http://www.smartmenus.org/about/themes/">Themes</a></li>
        <li><a href="http://vadikom.com/about/#vasil-dinkov">The author</a></li>
        <li>
          <a href="http://www.smartmenus.org/about/vadikom/" class="has-submenu" id="sm-14772210106692266-3" aria-haspopup="true" aria-controls="sm-14772210106692266-4" aria-expanded="false"><span class="sub-arrow"> </span>The company</a>
          <ul id="sm-14772210106692266-4" role="group" aria-hidden="true" aria-labelledby="sm-14772210106692266-3" aria-expanded="false">
            <li><a href="http://vadikom.com/about/">About Vadikom</a></li>
            <li><a href="http://vadikom.com/projects/">Projects</a></li>
            <li><a href="http://vadikom.com/services/">Services</a></li>
            <li><a href="http://www.smartmenus.org/about/vadikom/privacy-policy/">Privacy policy</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li>
      <a href="https://biddingsystem-holmessherlock.c9users.io/#" class="has-submenu" id="sm-14772210106692266-5" aria-haspopup="true" aria-controls="sm-14772210106692266-6" aria-expanded="false"><span class="sub-arrow"> </span>Sub test</a>
      <ul id="sm-14772210106692266-6" role="group" aria-hidden="true" aria-labelledby="sm-14772210106692266-5" aria-expanded="false">
        <li><a href="https://biddingsystem-holmessherlock.c9users.io/#">Dummy item</a></li>
        <li><a href="https://biddingsystem-holmessherlock.c9users.io/#">Dummy item</a></li>
        <li><a href="https://biddingsystem-holmessherlock.c9users.io/#" class="disabled">Disabled menu item</a></li>
        <li><a href="https://biddingsystem-holmessherlock.c9users.io/#">Dummy item</a></li>
        <li>
          <a href="https://biddingsystem-holmessherlock.c9users.io/#" class="has-submenu" id="sm-14772210106692266-7" aria-haspopup="true" aria-controls="sm-14772210106692266-8" aria-expanded="false"><span class="sub-arrow"> </span>more...</a>
          <ul id="sm-14772210106692266-8" role="group" aria-hidden="true" aria-labelledby="sm-14772210106692266-7" aria-expanded="false">
            <li><a href="https://biddingsystem-holmessherlock.c9users.io/#">Dummy item</a></li>
            <li>
              <a href="https://biddingsystem-holmessherlock.c9users.io/#" class="has-submenu" id="sm-14772210106692266-9" aria-haspopup="true" aria-controls="sm-14772210106692266-10" aria-expanded="false"><span class="sub-arrow"> </span>more...</a>
              <ul id="sm-14772210106692266-10" role="group" aria-hidden="true" aria-labelledby="sm-14772210106692266-9" aria-expanded="false">
                <li><a href="https://biddingsystem-holmessherlock.c9users.io/#">Dummy item</a></li>
                <li><a href="https://biddingsystem-holmessherlock.c9users.io/#" class="current">A 'current' class item</a></li>
                <li><a href="https://biddingsystem-holmessherlock.c9users.io/#">Dummy item</a></li>
                <li>
                  <a href="https://biddingsystem-holmessherlock.c9users.io/#" class="has-submenu" id="sm-14772210106692266-11" aria-haspopup="true" aria-controls="sm-14772210106692266-12" aria-expanded="false"><span class="sub-arrow"> </span>more...</a>
                  <ul id="sm-14772210106692266-12" role="group" aria-hidden="true" aria-labelledby="sm-14772210106692266-11" aria-expanded="false">
                    <li><a href="https://biddingsystem-holmessherlock.c9users.io/#">subMenusMinWidth</a></li>
                    <li><a href="https://biddingsystem-holmessherlock.c9users.io/#">10em</a></li>
                    <li><a href="https://biddingsystem-holmessherlock.c9users.io/#">forced.</a></li>
                  </ul>
                </li>
                <li><a href="https://biddingsystem-holmessherlock.c9users.io/#">Dummy item</a></li>
                <li><a href="https://biddingsystem-holmessherlock.c9users.io/#">Dummy item</a></li>
              </ul>
            </li>
            <li><a href="https://biddingsystem-holmessherlock.c9users.io/#">Dummy item</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li>
      <a href="https://biddingsystem-holmessherlock.c9users.io/#" class="has-submenu" id="sm-14772210106692266-13" aria-haspopup="true" aria-controls="sm-14772210106692266-14" aria-expanded="false"><span class="sub-arrow"> </span>Mega menu</a>
      <ul class="mega-menu" id="sm-14772210106692266-14" role="group" aria-hidden="true" aria-labelledby="sm-14772210106692266-13" aria-expanded="false">
        <li>
          <!-- The mega drop down contents -->
          <div style="width:400px;max-width:100%;">
            <div style="padding:5px 24px;">
              <p>This is a mega drop down test. Just set the "mega-menu" class to the parent UL element to inform the SmartMenus script. It can contain <strong>any HTML</strong>.</p>
              <p>Just style the contents as you like (you may need to reset some SmartMenus inherited styles - e.g. for lists, links, etc.)</p>
            </div>
          </div>
        </li>
      </ul>
    </li>
  </ul>
</nav>

</body>
</html>

Если я не загружу Bootstrap, удалив строку # 24, результат будет выглядеть как рисунок 1 (ожидаемый), где в качестве фактического представления используется рисунок 2 (с загруженным Bootstrap)

Рисунок 1

Рисунок 2

Другими словами, я не хочу дополнительного заполнения, окружающего строку меню со всех сторон. Однако строка меню не содержит отступов ни сверху, ни с обеих сторон.

1. Вы пробовали добавлять !important в свой стиль?

2. !important — это не лучшая практика, и ее следует избегать.

3. Вашему приложению не требуется Bootstrap. В идеале приложение / веб-сайт следует кодировать с нуля, записывая только необходимый CSS для существующих элементов . Не поймите меня неправильно, я сам использую фреймворки. Но они нужны именно мне, за счет того, что приложение / веб-сайт тяжелее, следовательно, медленнее. Приложению явно не нужно раздувание. Ваше утверждение неверно.

Ответ №1:

.navbar-fixed-top устанавливает ( position:fixed;left:0;top:0;right:0 ) в ваш элемент. поэтому удалите этот класс из своего nav тега

Ответ №2:

добавьте правила в #navbar id или класс .navbar, чтобы добавить правила заполнения, которые вы хотите расширить css из Bootstrap в вашем демо-файле.css.

Ответ №3:

Если вы хотите перезаписать свойство bootstrap css или любое другое, просто укажите «!важно»

 html, body {
    background:#fbf3e8 !important;
}

body {
    margin:0 !important;
    padding:2em 5px !important;
}