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

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

556   8  

8 ответов:

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

.sidebar.right { 
    float:right
}
41  
2011-11-10 21:37:53

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

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

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

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

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

.sidebar {
    float: right;
}

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

234  
2011-11-29 23:05:31

ответ на это-специфика CSS. Вам нужно быть более "конкретным" в вашем CSS, чтобы он мог переопределить свойства css bootstrap.

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

<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 загружается загружается после загрузки.CSS, который имеет следующую строку:

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

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

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

сделано.

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

59  
2017-11-23 07:41:08

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

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

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

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

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

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

20  
2011-11-10 21:50:20

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

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

9  
2015-10-25 02:54:50

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

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

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

Так что я добавил на класс в моем сайте.CSS-файл с таким же именем, как этот

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

Внимание !важно с моей маржей, которая будет перезаписывать маржу bootstarp page-header class margin.

6  
2014-02-17 07:20:01

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

Если вы используете 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

3  
2017-05-23 14:54:40

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

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

2  
2013-04-03 08:44:27

Comments

    Ничего не найдено.
Click here to cancel reply.