Joh*_*ohn 128 css twitter-bootstrap
如何覆盖Twitter Bootstrap中的样式？例如,我目前正在使用具有CSS规则'float:left;'的.sidebar类.我怎样才能改变它,以便它向右转？我正在使用HAML和SASS,但它对于Web开发来说相对较新.
cit*_*lao 234
所有这些技巧都可行,但更简单的方法可能是在Bootstrap 样式之后包含样式表.
如果site-specific.css在Bootstrap ()之后包含css()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,我不太清楚他们在其中编写教程.
kai*_*r1v 58
答案就是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>
在这里,您需要记住特异性的层次结构.它是这样的:
所以,对于上面的内容,如果你的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分).
因此,基本上您需要做的就是通过浏览器上的inspect元素计算您想要更改css的元素的点数.这里,bootstrap已将其元素的css指定为
.navbar-inverse .navbar-nav>li>a { /* Total = 22 points */
color: #999;
}
所以,即使你的css正在加载正在bootstrap.css之后加载,它有以下行:
.navbar-nav li a {
color: red;
}
它仍将被渲染为#999.为了解决这个问题,bootstrap有22个点(自己计算).所以我们所需要的只是更多.因此,我已经为元素添加了自定义ID,即主菜单容器和主菜单.现在以下css将起作用:
#home-menu-container #home-menu li a { color: red; } /* 100 + 100 + 1 + 1 = 202 points :) */
完成.
您可以参考此MDN链接.
mot*_*533 41
<div class="sidebar right"></div>使用CSS 添加您自己的类,例如:
.sidebar.right {
float:right
}
Dio*_*ane 20
您可以通过使其"更具体"来覆盖CSS类.
您上到HTML树,并指定父元素:
div.sidebar { ... } 比具体更具体 .sidebar { ... }
如果您需要,您可以一直到BODY:
body .sidebar { ... } 将覆盖几乎任何东西.
请参阅此便捷指南:http://css-tricks.com/855-specifics-on-css-specificity/
您可以确保您的css文件解析AFTER boostrap.css,如下所示:
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/myFile.css" rel="stylesheet">
如果你想在bootstrap中覆盖任何css,请使用!important
让我们说这里是bootstrap中的页眉类,顶部有40px的边距,我的客户不喜欢它,他希望它只有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页眉类边距的余量.
| 归档时间： |
|
| 查看次数： |
156570 次 |
| 最近记录： |