Twitter bootstrap переопределяет `a` в` navbar`

Как отключить padding на a в navbar

Я получил следующие правила css для

.navbar .nav > li > a {
  float: none;
  padding: 10px 15px 10px;
  color: #555555;
  text-decoration: none;
  text-shadow: 0 1px 0 #ffffff;
}

и я хотел бы иметь padding: 5px, 5px, 5px

Ответ 1

И есть проблема с использованием бутстрапа, его приятно, пока вы не должны его модифицировать.

Я нашел ваше конкретное правило, перейдя в bootstrap.css и выполнив поиск ".navbar.nav" (я также использую bootstrap в проекте ruby on rails), это было вокруг строки 4380. (это для неинфицированной версии )

Итак, у вас есть несколько вариантов:

Вы можете найти его и изменить там правило.
Вы можете переопределить его в строке, если вам просто нужно это на нескольких.
Вы можете поместить его в файл css, который, как вы знаете (я использую ваши рельсы), рельсы предварительно скомпилируют его позже, чем правило twitters (в css последнее чтение правила применяется).
Или вы можете написать свое собственное правило и использовать !important в конце правила. Это будет выглядеть так:
```
.navbar .nav > li > a {
    padding: 5px 5px 5px !important;
}
```

Что опасно (это может усложнить поддержку вашего css в конечном итоге.) Но все же допустимый вариант, если все остальное не работает.

Как примечание: на самом деле вы должны использовать неинфицированную версию bootstrap для разработки. Когда рельсы собирают ваши активы для развертывания, он будет его минимизировать. Делает изменения в файлах сторонних разработчиков, в которых 100x проще работать.

(Это также предполагает, что вы не используете самонастраивающийся жемчуг для импорта вашего css, и в этом случае см. один из вышеперечисленных вариантов)

Ответ 2

Чтобы "переопределить" стиль, нам нужно более конкретное правило. В принятом ответе используется правило !important, которое должно быть последним средством. Как часто бывает с CSS, у нас есть множество доступных нам вариантов.

Вариант 1: Создайте дополнительный класс

.primary.navbar .nav > li > a {
    padding: 5px 5px 5px;
}

Вариант 2: Повторить класс

.navbar.navbar .nav > li > a {
    padding: 5px 5px 5px;
}

W3C:

Разрешены повторяющиеся вхождения одного и того же простого селектора и делают повысить специфичность.

Вариант 3: Использовать тот же класс, но определить этот класс после начальной загрузки

 <link rel="stylesheet" href="bootstrap.css">
 <link rel="stylesheet" href="modify_bootstrap.css">

Если вы этого еще не знали, не требуется в HTML5

.navbar .nav > li > a {
    padding: 5px 5px 5px;
}

Ответ 3

Вы можете добавить класс my-padding к своему элементу и использовать в своем app.css, который вы связываете со своим html после bootstrap.css

.navbar-nav > li > .my-padding {
    padding: 5px 5px 5px;
}