Блог

Главная - Вопросы по программированию - Почему Bootstrap переопределяет мой пользовательский CSS?

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

#css #twitter-bootstrap

#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. Способ выяснить это — загрузить оба в браузер, а затем изучить их с помощью хорошего отладчика (например, встроенного в Chrome или многие другие браузеры), чтобы увидеть, как источник ccs атрибутов заполнения отличается между ними.

2. если все остальное не удается, добавьте !important в конец ваших инструкций CSS, например padding: 2em !important; . Хотя это не считается лучшей практикой.

3. Присвойте ваше nav значение margin типа margin:10px . Это устранит проблему.

4. Можете ли вы подтвердить, что отсутствие <div class=»container»></div> в HTML намеренно?

Ответ №1:

Несколько вещей, которые следует учитывать.

  1. Убедитесь, что селектор CSS точно соответствует правилу, которое вы хотите переопределить в файле начальной загрузки. Итак, если div > a > span не переходите div > span
  2. Убедитесь, что файл bootstrap не использует ключевое слово !important
  3. Добавьте type="text/css" в ссылку bootstrap
  4. наконец, посмотрите, работает ли это, если вы введете ключевое слово !important