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

Ответ 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;
}