blocks|key|517810|text|添加您自己的类，例如：<div+class="sidebar+right"></div>，其CSS为|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|517811|.sidebar.right+{+
++++float:right
}+|code-block|syntax|javascript|517812|entityMap^0|B|X|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

Add your own class, ex: <code>&lt;div class="sidebar right"&gt;&lt;/div&gt;</code>, with the CSS as 

<pre><code>.sidebar.right { 
 float:right
} 
</code></pre>

blocks|key|734210|text|您可以通过使CSS类“更具体”来覆盖它。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|734211|您在HTML树中向上移动，并指定父元素：|734212|div.sidebar+{+...+}比.sidebar+{+...+}更具体|offset|length|style|CODE|734213|如果你需要，你可以一直到BODY：|734214|body+.sidebar+{+...+}几乎可以覆盖任何东西。|734215|请参阅这个方便的指南：http://css-tricks.com/855-specifics-on-css-specificity/|734216|entityMap|0|LINK|mutability|MUTABLE|url|http://css-tricks.com/855-specifics-on-css-specificity/^0|0|0|0|J|K|G|0|0|0|L|0|B|1J|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Y|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|Z|8|@$F|10|G|11|H|I]|$F|12|G|13|H|I]]|9|@]|A|$]]|$1|J|3|K|5|6|7|14|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|15|8|@$F|16|G|17|H|I]]|9|@]|A|$]]|$1|N|3|O|5|6|7|18|8|@]|9|@$F|19|G|1A|1|1B]]|A|$]]|$1|P|3|-4|5|6|7|1C|8|@]|9|@]|A|$]]]|Q|$R|$5|S|T|U|A|$V|W]]]]

You can overwrite a CSS class by making it "more specific".

You go up the HTML tree, and specify parent elements:

<code>div.sidebar { ... }</code> is more specific than <code>.sidebar { ... }</code>

You can go all the way up to BODY if you need to:

<code>body .sidebar { ... }</code> will override virtually anything.

See this handy guide: <a href="http://css-tricks.com/855-specifics-on-css-specificity/">http://css-tricks.com/855-specifics-on-css-specificity/</a>

blocks|key|517924|text|来得太晚了，但我想它可以用另一个答案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|517925|如果你使用的是sass，你可以在导入bootstrap之前改变变量。http://twitter.github.com/bootstrap/customize.html#variables|offset|length|517926|更改其中任何一个，例如：|517927|$bodyBackground:+red;
@import+"bootstrap";|code-block|syntax|javascript|517928|或者，如果您想要更改的内容没有可用的变量，您可以覆盖样式或添加自己的样式。|517929|萨斯：|517930|@import+"bootstrap";

/*+override+anything+manually,+like+rounded+buttons+*/
.btn+{
++border-radius:+0;
}|517931|另请参阅：Proper+SCSS+Asset+Structure+in+Rails|517932|entityMap|0|LINK|mutability|MUTABLE|url|http://twitter.github.com/bootstrap/customize.html#variables|1|https://stackoverflow.com/questions/9138946/proper-scss-asset-structure-in-rails^0|0|Y|1O|0|0|0|0|0|0|0|5|10|1|0^^$0|@$1|2|3|4|5|6|7|14|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|15|8|@]|9|@$D|16|E|17|1|18]]|A|$]]|$1|F|3|G|5|6|7|19|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|1A|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|1B|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|1C|8|@]|9|@]|A|$]]|$1|Q|3|R|5|J|7|1D|8|@]|9|@]|A|$K|L]]|$1|S|3|T|5|6|7|1E|8|@]|9|@$D|1F|E|1G|1|1H]]|A|$]]|$1|U|3|-4|5|6|7|1I|8|@]|9|@]|A|$]]]|V|$W|$5|X|Y|Z|A|$10|11]]|12|$5|X|Y|Z|A|$10|13]]]]

Came across this late, but I think it could use another answer.

If you're using sass, you can actually change the variables before you import bootstrap. <a href="http://twitter.github.com/bootstrap/customize.html#variables" rel="nofollow noreferrer">http://twitter.github.com/bootstrap/customize.html#variables</a>

Change any of them, such as:

<pre><code>$bodyBackground: red;
@import "bootstrap";
</code></pre>

Alternatively if there isn't a variable available for what you want to change, you can override the styles or add your own. 

Sass:

<pre><code>@import "bootstrap";

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

Also see this: <a href="https://stackoverflow.com/questions/9138946/proper-scss-asset-structure-in-rails">Proper SCSS Asset Structure in Rails</a>

blocks|key|518128|text|我知道这是一个老问题，但我仍然遇到了类似的问题，我意识到我的bootstrapOverload.css文件中“不工作”的css代码是在media+queries之后编写的。当我把它移到媒体查询上面时，它就开始工作了。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|518129|以防其他人也面临同样的问题|518130|entityMap^0|U|L|1V|D|0|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]|$9|M|A|N|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|O|8|@]|D|@]|E|$]]|$1|H|3|-4|5|6|7|P|8|@]|D|@]|E|$]]]|I|$]]

I know this is an old question but still, I came across a similar problem and i realized that my "not working" css code in my <code>bootstrapOverload.css</code> file was written after the <code>media queries</code>. when I moved it above media queries it started working. 

Just in case someone else is facing the same problem

blocks|key|518245|text|如果你想在bootstrap中覆盖任何css，使用！重要|type|unstyled|depth|inlineStyleRanges|entityRanges|data|518246|假设这里是bootstrap中的页眉类，它在顶部有40px的边距，我的客户不喜欢它，他希望它在顶部是15，在底部只有10|518247|.page-header+{
++++border-bottom:+1px+solid+#EEEEEE;
++++margin:+40px+0+20px;
++++padding-bottom:+9px;
}|code-block|syntax|javascript|518248|所以我在site.css文件中添加了一个同名的类，如下所示|518249|.page-header
{
++++padding-bottom:+9px;
++++margin:+15px+0+10px+0px+!important;
}|518250|请注意!important+with+my+which，它将覆盖bootstarp页面标题类的边距。|518251|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

If you want to overwrite any css in bootstrap use !important

Let's say here is the page header class in bootstrap which have 40px margin on top, my client don't like it and he want it to be 15 on top and 10 on bottom only

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

So I added on class in my site.css file with the same name like this

<pre><code>.page-header
{
 padding-bottom: 9px;
 margin: 15px 0 10px 0px !important;
}
</code></pre>

Note the !important with my margin, which will overwrite the margin of bootstarp page-header class margin.

How can I overwrite the stylings in Twitter Bootstrap? For instance, I am currently using a .sidebar class that has the CSS rule 'float: left;' How can I change this so that it goes to the right instead? I'm using HAML and SASS but am relatively new to web development.

How to overwrite styling in Twitter Bootstrap

如何覆盖Twitter Bootstrap中的样式？例如，我当前使用的.sidebar类具有CSS规则“float:left”；我如何将其更改为向右移动？我正在使用HAML和SASS，但对web开发来说还是个新手。

问如何在Twitter Bootstrap中覆盖样式
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在Twitter Bootstrap中覆盖样式EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在Twitter Bootstrap中覆盖样式
EN