Нет способа переопределить Bootstrap - PullRequest
Новая
       6

Нет способа переопределить Bootstrap

0 голосов
/ 03 ноября 2018

Прежде всего, я исследовал эту тему здесь и через Google в течение всего дня и перепробовал все, что нашел, по какой-то причине я все еще не могу изменить стиль Bootstrap. Мой пользовательский css работает, так как первая его модификация работала просто замечательно, когда не нужно было ничего переопределять (поэтому не было стиля по умолчанию для input: hover, который я использовал в bootstrap.)

Вот код: 

.input-group-prepend.form-control:focus {
    color: #495057;
    background-color: #fff;
    border-color: #fff;
    outline: 0;
    box-shadow: inset 0 11px 20px rgba(0,0,0,0.19), inset 0 6px 6px rgba(0,0,0,0.23);
}

ОБРАТИТЕ ВНИМАНИЕ, что селектор здесь должен быть похож на 20-ю версию, которую я пробовал. Здесь я не могу изменить поведение поля ввода в фокусе. Я пробовал все после десятка поисков в Google, ничего не получалось Я также использовал Chrome Inspect, чтобы найти, где используется box-shadow, и внутри Inspect я также смог CHANGE свойство, что дало желаемый вид, но после копирования этой части в мой css с помощью селектора css это не сработало. больше. Попробовав также настроить селекторы, чтобы сделать их более конкретными, вычислили «Точки приоритета» или как их еще называют, использовали идентификаторы и все такое, и поместили ссылку на мою таблицу стилей после начальной загрузки в HTML-файл - без изменений (в лучшую сторону , то есть). Все это сработало для других людей здесь и на YouTube, и повсюду в Интернете, и, похоже, у меня та же ситуация и решение, а для меня они до сих пор нет. Я думаю о том, чтобы оставить начальную загрузку и попробовать создать что-то с нуля, но я не настолько опытен в CSS, и я чувствую, что никогда не хочу этого делать, если это так. [Введите описание изображения здесь] [1]

Еще немного кода: 

button .btn-raised {
    box-shadow: 0 30px 0 0 #007299;
}

Вторая часть, при попытке установить box-shadow для кнопок, это невозможно, хотя ни btn, ни btn-light, которые я использую, ничего не делают с box-shadow, Chrome Inspect просто показывает 'none как значение этого свойства. (Хотя я обнаружил, что есть некоторый переход, где он задействован, но я никоим образом не могу переопределить или отключить его.) Опять же, было перепробовано множество вариантов селектора.

ОБНОВЛЕНИЕ: проблема решена, оказалось, что все проблемы, которые у меня были, были из-за того, что я пропустил очистку кеша перед перезагрузкой страницы - никогда не забывайте об этом! :)

1 Ответ

0 голосов
/ 03 ноября 2018

Кажется, работает нормально для меня. Я думаю, что вы можете загружать свой CSS до Bootstrap, или у вас есть другие стили, переопределяющие ваши последние стили из-за специфики.

В качестве последнего средства, просто чтобы проверить эту теорию, вы можете попробовать добавить! Важный после ваших стилей. Если это работает, то вы знаете, что это проблема специфичности селектора, но я не рекомендую использовать! Важный в общем.

например: 

div {
    background-color: #000 !important;
}


button {
 	box-shadow: 2px 5px 1px 0 #007299;
}

.input-group-prepend {
  margin-top: 20px;
}

.input-group-prepend .form-control:focus {
    color: #495057;
    background-color: #fff;
    border-color: #fff;
    outline: 0;
    box-shadow: inset 0 11px 20px rgba(0,0,0,0.19), inset 0 6px 6px rgba(0,0,0,0.23);
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<button class="btn btn-light">I am a button</button>

<div class="input-group-prepend">
	<input type="text" class="form-control">
</div>
...