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

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

Ответ 1

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

.sidebar.right { 
    float:right
}

Ответ 2

Все эти советы будут работать, но более простым способом может быть включение вашей таблицы стилей после стилей 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, я не знаю их достаточно хорошо, чтобы писать учебники в них.

Ответ 3

Ответ на это - спецификация CSS. Вам нужно быть более "конкретным" в вашем CSS, чтобы он мог переопределять свойства bootstrap 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 a после .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.

Ответ 4

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

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

div.sidebar { ... } более специфичен, чем .sidebar { ... }

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

body .sidebar { ... } будет отменять практически все.

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

Ответ 5

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

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

Ответ 6

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

Скажем, вот класс заголовка страницы в бутстрапе, который имеет верхний край на 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;
}

Обратите внимание на важность! с моим пометкой, которая перезапишет маржу поля класса заголовка bootstarp.

Ответ 7

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

Если вы используете sass, вы можете фактически изменить переменные перед импортом bootstrap. 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

Ответ 8

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

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