Как переопределить стили Bootstrap в Meteor?

Question

Я использую twbs bootstrap 3.3.6 с помощью Meteor и пытаюсь создать <fieldset>.

Однако, когда я использую инспектора Chrome, он говорит, что стиль исходит из bootstrap.css, хотя я пробовал использовать специфичные для класса и специфичные для id css.

Моя таблица стилей находится в корне приложения, как это предложено некоторыми ответами.

Я очень новичок в метеоре и css, поэтому я мог бы сделать новичковую ошибку.

В противном случае, что лучше всего переопределить настройки бутстрапа css?

Answer 1

Как правило, если вы хотите переопределить css, вы должны поместить свой файл css после всех других файлов, таких как bootstrap css, потому что css начинается сверху вниз, так что нижние строки будут исполняться, например:

<link rel="stylesheet" href="css/bootstrap.min.css" /> 
<link rel="stylesheet" href="css/your-css.css" /> 

Также вы можете добавить !important в конце каждой Css линии, чтобы придать этот стилю высшего приоритета независимо от индекса строки, например:

.someclass { 
    color: red!important; 
} 

Answer 2

вы можете переопределить конкретные собственности на тот же класс в вашем css ...

.btn { 
    background-color: #fff !important; 
} 

... создать карту наследования, так что это относится только к элементу внутри другого конкретного элемента ...

div.classForSpecificContainer btn { 
    background-color: #fff !important; 
} 

или указать свой собственный класс и добавить его к элементу в вопросе

myOverrideClass { 
    background-color: #fff !important; 
} 

.. важно части является то, что вы используете !important;, чтобы предотвратить Bootstrap переопределения его. Это, как правило, решает проблему, даже если файлы CSS загружаются в неправильном порядке, но не всегда. У меня есть привычка префиксать мои файлы CSS в той же папке с z-, чтобы убедиться, что они загружаются последним, если я использую что-то вроде Meteor, которое объединяет и сжимает CSS.