如何覆盖Twitter Bootstrap中的样式

如何覆盖Twitter Bootstrap中的样式?例如,我当前正在使用具有CSS规则“ float:left;”的.sidebar类。我该如何更改它以便使其转至右侧?我正在使用HAML和SASS,但对于Web开发来说相对较新。



芜湖不芜
浏览 427回答 2
2回答

哈士奇WWW

添加您自己的类,例如:<div class="sidebar right"></div>CSS:.sidebar.right {&nbsp;&nbsp; &nbsp; float:right}&nbsp;

九州编程

答案是CSS专用性。您需要在CSS中更“特定”,以便它可以覆盖bootstrap css属性。例如,您在此处具有引导菜单的示例代码:<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">&nbsp; &nbsp; <div id="home-menu-container" class="collapse navbar-collapse">&nbsp; &nbsp; &nbsp; &nbsp; <ul id="home-menu" class="nav navbar-nav">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li><a class="navbar-brand" href="#"><img src="images/xd_logo.png" /></a></li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li><a href="#intro">Home</a></li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li><a href="#about">About Us</a></li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li><a href="#services">What We Do</a></li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li><a href="#process">Our Process</a><br /></li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li><a href="#portfolio">Portfolio</a></li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li><a href="#contact">Contact Us</a></li>&nbsp; &nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; </div><!-- /.navbar-collapse --></nav>在这里,您需要记住特异性的层次结构。它是这样的:给一个id为100的元素给一个元素上提到10分的课程给一个简单的元素一个单点因此,对于上述情况,如果您的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分),它仍然会被红色而不是绿色覆盖。因此,基本上您所需要做的就是通过浏览器上的inspect元素来计算要更改css的元素的点数。在这里,bootstrap为元素指定了其css为.navbar-inverse .navbar-nav>li>a { /* Total = 22 points */&nbsp; &nbsp; color: #999;}因此,即使您的css正在加载,也要在bootstrap.css之后加载,并包含以下行:.navbar-nav li a {&nbsp; &nbsp; color: red;}它仍将呈现为#999。为了解决这个问题,引导程序有22分(您自己计算)。因此,我们所需要的不只是这些。因此,我将自定义ID添加到元素,即home-menu-container和home-menu。现在,以下CSS将起作用:#home-menu-container #home-menu li a { color: red; } /* 100 + 100 + 1 + 1 = 202 points :) */做完了您可以参考此MDN链接。
打开App,查看更多内容
随时随地看视频慕课网APP