Переопределение Bootstrap CSS
Недавно я сослался на загрузочный css в своем коде следующим образом:
<link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity = "sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin = "anonymous">
Однако мне не нравится граница, которую он ставит на .card элементы. Я попытался переопределить загрузку и удалить границу, вставив style = "border: 0" в div карты, но это ничего не дало.
.card {
border: 0;
}<link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity = "sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin = "anonymous">
<div class = "card card-sm" id = "localcard">
<p> See Thin Border </p>
</div>Как убрать эту границу?
@NathanielFlick, не могли бы вы показать пример? Я новичок в css и не знаю, что это значит
—
16.12.2020 19:22
Да, на этот вопрос уже очень хорошо ответили здесь: stackoverflow.com/questions/20721248/…
—
16.12.2020 19:25
прочитайте документ: getbootstrap.com/docs/4.1/utilities/borders
—
16.12.2020 19:35
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
3
4
178
2
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 2
Вы можете установить тег !important в CSS следующим образом:
.card {
border: 0 !important;
}<link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity = "sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin = "anonymous">
<div class = "card card-sm" id = "localcard">
<p> No Border </p>
</div>Не используйте важные. Чтобы переопределить Bootstrap (или любой CSS), вам нужно переписать стиль, который будет загружаться после Bootstrap (далее по глобальному каскаду).
—
16.12.2020 19:19
Используйте класс начальной загрузки перед запуском !important ;)
—
16.12.2020 19:34
Ответ принят как подходящий
Нет необходимости в собственном стиле, используйте встроенный класс: https://getbootstrap.com/docs/4.1/utilities/borders/
<link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity = "sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin = "anonymous">
<div class = "card card-sm border-0" id = "localcard">
<p> See, no Border! </p>
</div>Другие вопросы по теме
Строка таблицы не получает класс
Скрытое переполнение не полностью скрывает родительский div с радиусом границы
Как вызвать действие наведения на внешнем элементе
Создайте градиентный фон, который выглядит как две полоски
Css анимация непрозрачности ключевых кадров на img не работает
Почему background-size не работает с HTML или BODY, если высота не определена, но работает обложка background-size?
Удалить линию, которая появляется в разделителе формы на мобильных устройствах
Я хочу навести курсор на свое изображение, и кнопка будет скользить слева, и она не работает
Как изменить ширину столбца с помощью ng-material-treetable?
Как вносить изменения в стилизованные компоненты в зависимости от состояния
Похожие вопросы
Пузырьковая сортировка Почему числа сортируются только наполовину? JS и HTML
Строка таблицы не получает класс
Скрытое переполнение не полностью скрывает родительский div с радиусом границы
Как вызвать действие наведения на внешнем элементе
Создайте градиентный фон, который выглядит как две полоски
Css анимация непрозрачности ключевых кадров на img не работает
Как я могу открыть ссылку напрямую, используя php «echo»? Есть ли способ открыть ссылку напрямую, а не страницу с текстом гиперссылки?
Есть ли способ отложить выход из мыши в JQuery?
Почему background-size не работает с HTML или BODY, если высота не определена, но работает обложка background-size?
Удалить линию, которая появляется в разделителе формы на мобильных устройствах
Добавьте пользовательскую таблицу стилей, на которую вы ссылаетесь после начальной загрузки, затем перепишите там класс, чтобы переопределить базовый класс начальной загрузки.