Boostrap не перекрывает мой собственный CSS
Я начинаю с начальной загрузки, и я хотел сделать простой выбор, используя boostrap, но каким-то образом это разрушает мою страницу. Я думал, что boostrap переопределит мой собственный CSS, но этого не происходит, почему?
<link rel="stylesheet" type="text/css" href="bootstrap-select.min.css"/>
<script href="jquery-3.2.1.min.js"></script>
<script href="bootstrap.min.js"></script>
<script href="bootstrap-select.min.js"></script>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
После замены мест (используйте ссылки, чтобы убедиться, что они правильные):
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<link rel="stylesheet" type="text/css" media="screen" href="bootstrap-select/dist/css/bootstrap-select.min.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.9.3/js/bootstrap-select.min.js"></script>
<link rel="stylesheet" href="bootstrap-select/dist/css/bootstrap.min.css"/>
Выберите выглядит следующим образом: https://i.imgur.com/VaAT9sW.png
4 ответа
вы можете переопределить с помощью!importantнапример:color: red!
Это связано с порядком, в котором установлен импорт. Импорт дальше вниз получает приоритет (перезаписывается) над импортом до него.
<link rel="stylesheet" type="text/css" href="bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
Должен быть изменен на:
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<link rel="stylesheet" type="text/css" href="bootstrap.min.css"/>
(сначала поместите файл, который вы хотите иметь меньшим приоритетом)
Переместите весь ваш JS внизу, css вверх и попробуйте удалить "экран" в части css
media = "screen" />
к
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="bootstrap-select.min.css"/>
<link rel="stylesheet" type="text/css" href="style.css"/>
<body>
.....
</body>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script href="bootstrap-select.min.js"></script>
Надеюсь на эту помощь.
Порядок внешних таблиц стилей имеет значение только в том случае, если все таблицы имеют стили с одинаковыми селекторами, свойствами, весом и специфичностью. Вряд ли это правда.
Итак, что я бы сделал, это сначала отключить ваш лист и просмотреть вашу веб-страницу только с помощью Bootstrap. Нажмите F12 в браузере, откройте окно фактического каскада стилей и посмотрите, какие правила применяются. Я могу сказать вам, что у вас, вероятно, есть мешанина стилей в Bootstrap, наследуемая элементом select. Bootstrap начинает с попытки изменить поля, шрифты и высоту строки основного элемента select. Затем он накладывает слои на пользовательские стили через классы, которые он применяет к ним. Затем посмотрите на обертку div или блочный элемент, удерживающий его. Bootstrap любит плавающие элементы, которые отделяют элементы от страницы и блокируют их.
Теперь добавьте свой лист обратно и посмотрите, что было каскадировано, что добавило стили Bootstrap.
Даже если их классы каскадируются поверх ваших стилей, ваши стили могут изменять свойства, на которые Bootstrap не влияет. Поэтому я бы отключил все стили на вашем листе, которые влияют на элементы «выбрать», а затем осторожно добавил бы ваши собственные стили выбора, чтобы ДОБАВИТЬ не изменить стили Bootstrap. Я бы изменил только простые эффекты, такие как цвета или элементы уровня внешнего блока, в которых находится «выбор».