Как перезаписать стили в Twitter Bootstrap

128

Как я могу перезаписать стили в Twitter Bootstrap? Например, в настоящее время я использую класс .sidebar с правилом CSS float: left; Как я могу изменить это так, чтобы вместо этого он шел вправо? Я использую HAML и SASS, но относительно новичок в веб-разработке.

css twitter-bootstrap Джон
источник

См. Также: stackoverflow.com/questions/8596794/…

Зим

41

Добавьте свой собственный класс, например:, <div class="sidebar right"></div>с CSS как

.sidebar.right { 
    float:right
}

motoxer4533
источник

1

Не лучшая практика: github.com/CSSLint/csslint/wiki/Disallow-adjoining-classes

Damjan Pavlica

2

@DamjanPavlica Честно? Вам все еще небезразличен IE 6? Не говоря уже о том, что, как мне кажется, бутстрап использует цепочку.

Błażej Michalik

233

Все эти советы будут работать, но более простой способ - включить вашу таблицу стилей после стилей Bootstrap.

Если вы включите свой css ( site-specific.css) после Bootstrap ( bootstrap.css), вы можете переопределить правила, переопределив их.

Например, если вы включили CSS в свой <head>

<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/site-specific.css" />

Вы можете просто переместить боковую панель вправо, написав (в своем site-specific.cssфайле):

.sidebar {
    float: right;
}

Простите за отсутствие HAML и SASS, я не знаю их достаточно хорошо, чтобы писать по ним учебники.

citelao
источник

7

@ClaudiuConstantin Я не вижу причин, почему нет. Эмпирическое правило состоит в том, что второй стиль всегда будет важнее первого, если два стиля имеют одинаковый уровень специфичности. Если ваш стиль будет после него, он будет иметь приоритет.

citelao

3

@Kreker Это, вероятно, во многом связано со спецификой. Вы можете прочитать об этом здесь (старая статья), но в основном .sidebar.rightэто более конкретно, чем .sidebar. Вероятно, в этом проблема. Используйте веб-инспектор, чтобы выяснить, что его отменяет.

citelao

2

@Kreker Ага, вот в чем идея. Проблема в !importantтом, что вы никогда не сможете отменить его снова в будущем.

citelao

5

My Site.cssобъединен, включен в список Bundle.configи физически визуализирован после, bootstrap.css но стили все еще не переопределены. Мне пришлось вынуть site.cssссылку из пакета модернизатора и вручную поместить ее после bootstrap.css(и нажать Ctrl + F5 после отладки, чтобы очистить кеш)

atconway

1

Это может сработать, но не для продакшена. Загружайте по одной таблице стилей на сайт, если нет серьезных причин не делать этого. #sitespeed

Бен Расикот

58

Ответ на это - специфичность CSS. Вам нужно быть более «конкретным» в своем CSS, чтобы он мог переопределять свойства начальной загрузки css.

Например, здесь у вас есть образец кода для меню начальной загрузки:

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div id="home-menu-container" class="collapse navbar-collapse">
        <ul id="home-menu" class="nav navbar-nav">
            <li><a class="navbar-brand" href="#"><img src="images/xd_logo.png" /></a></li>
            <li><a href="#intro">Home</a></li>
            <li><a href="#about">About Us</a></li>
            <li><a href="#services">What We Do</a></li>
            <li><a href="#process">Our Process</a><br /></li>
            <li><a href="#portfolio">Portfolio</a></li>
            <li><a href="#contact">Contact Us</a></li>
        </ul>
    </div><!-- /.navbar-collapse -->
</nav>

Здесь нужно помнить об иерархии специфики. Это выглядит так:

Дайте элементу с упомянутым идентификатором 100 баллов
Дайте элементу с упомянутым классом 10 баллов
Дайте простому элементу 1 балл

Итак, для приведенного выше, если в вашем css есть что-то вроде этого:

.navbar ul li a { color: red; } /* 10(.navbar) + 1(ul) + 1(li) + 1(a) = 13 points */
.navbar a { color: green; } /* 10(.navbar) + 1(a) = 11 points */

Таким образом, даже если вы определили .navbar aafter, .navbar ul li aон все равно будет заменен красным цветом, а не зеленым, поскольку специфичность больше (13 баллов).

Итак, в основном все, что вам нужно сделать, это вычислить баллы для элемента, для которого вы хотите изменить CSS, с помощью элемента проверки в вашем браузере. Здесь bootstrap указал свой css для элемента как

.navbar-inverse .navbar-nav>li>a { /* Total = 22 points */
    color: #999;
}

Итак, даже если ваш css загружается, он загружается после bootstrap.css, который имеет следующую строку:

.navbar-nav li a {
    color: red;
}

он по-прежнему будет отображаться как # 999. Чтобы решить эту проблему, у бутстрапа есть 22 балла (рассчитайте сами). Так что все, что нам нужно, это нечто большее. Таким образом, я добавил пользовательские идентификаторы к элементам, например, home-menu-container и home-menu. Теперь будет работать следующий css:

#home-menu-container #home-menu li a { color: red; } /* 100 + 100 + 1 + 1 = 202 points :) */

Готово.

Вы можете обратиться к этой ссылке MDN .

kaizer1v
источник

1

Что, если они связаны?

Confused

2

Это не имеет значения, например, '.abc.xyz' означает, что существует элемент с классом 'abc' и 'xyz' - он все равно будет воспринимать его как единый элемент с классом. Итак, 10 баллов. то же самое касается ID.

kaizer1v

1

Хорошо написанный! Спасибо!

GobSmack

1

Это был трюк для меня. У меня возникли проблемы с изменением blockquoteстиля в CSS Bootstrap. Как ни странно, это было неправильно для обычных цитат, но выглядело правильно для и <ul> внутри цитаты. Ключом было обновление моего CSS blockquote p, что давало достаточный приоритет. <ul> делал это для другого раздела страницы.

Adam Wuerl

20

Вы можете перезаписать класс CSS, сделав его «более конкретным».

Вы поднимаетесь по дереву HTML и указываете родительские элементы:

div.sidebar { ... } более конкретен, чем .sidebar { ... }

Вы можете пройти весь путь до BODY, если вам нужно:

body .sidebar { ... } переопределит практически все.

См. Это удобное руководство: http://css-tricks.com/855-specifics-on-css-specificity/

Диодей - Джеймс Макфарлейн
источник

На самом деле это лучший ответ

CodyBugstein

9

Вы можете просто убедиться, что ваш файл css анализирует ПОСЛЕ boostrap.css, например:

<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/myFile.css" rel="stylesheet">

Gothburz
источник

6

Если вы хотите перезаписать любой CSS при загрузке, используйте! Important

Скажем, вот класс заголовка страницы в начальной загрузке с полем 40 пикселей вверху, моему клиенту это не нравится, и он хочет, чтобы оно было 15 сверху и 10 только снизу.

.page-header {
    border-bottom: 1px solid #EEEEEE;
    margin: 40px 0 20px;
    padding-bottom: 9px;
}

Поэтому я добавил класс в свой файл site.css с таким же именем, как это

.page-header
{
    padding-bottom: 9px;
    margin: 15px 0 10px 0px !important;
}

Обратите внимание на! Important с моим полем, которое перезапишет поле поля класса заголовка страницы bootstarp.

Али Адрави
источник

здорово! это то, что я хочу. Спасибо

Gisway

2

Обратите внимание, что использование! Important - это своего рода анти-шаблон. Подробнее читайте здесь: james.padolsey.com/css/dont-use-important

mayatron

3

Пришел так поздно, но я думаю, что можно использовать другой ответ.

Если вы используете sass, вы действительно можете изменить переменные перед импортом начальной загрузки. http://twitter.github.com/bootstrap/customize.html#variables

Измените любой из них, например:

$bodyBackground: red;
@import "bootstrap";

В качестве альтернативы, если нет переменной, доступной для того, что вы хотите изменить, вы можете переопределить стили или добавить свои собственные.

Sass:

@import "bootstrap";

/* override anything manually, like rounded buttons */
.btn {
  border-radius: 0;
}

Также смотрите: Правильная структура активов SCSS в Rails

AJcodez
источник

2

Я знаю, что это старый вопрос, но все же я столкнулся с аналогичной проблемой и понял, что мой "неработающий" код css в моем bootstrapOverload.cssфайле был написан после media queries. когда я переместил его над медиа-запросами, он начал работать.

На всякий случай, если кто-то еще столкнется с той же проблемой

md1hunox
источник

Как перезаписать стили в Twitter Bootstrap

Ответы: