如何覆蓋Twitter Bootstrap中的樣式？例如，我當(dāng)前正在使用具有CSS規(guī)則“ float：left;”的.sidebar類。我該如何更改它以便使其轉(zhuǎn)至右側(cè)？我正在使用HAML和SASS，但對(duì)于Web開(kāi)發(fā)來(lái)說(shuō)相對(duì)較新。
2 回答
哈士奇WWW
TA貢獻(xiàn)1799條經(jīng)驗(yàn) 獲得超6個(gè)贊
添加您自己的類，例如：<div class="sidebar right"></div>CSS：
.sidebar.right {
float:right
}
九州編程
TA貢獻(xiàn)1785條經(jīng)驗(yàn) 獲得超4個(gè)贊
答案是CSS專用性。您需要在CSS中更“特定”，以便它可以覆蓋bootstrap css屬性。
例如，您在此處具有引導(dǎo)菜單的示例代碼：
<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>
在這里，您需要記住特異性的層次結(jié)構(gòu)。它是這樣的：
給一個(gè)id為100的元素
給一個(gè)元素上提到10分的課程
給一個(gè)簡(jiǎn)單的元素一個(gè)單點(diǎn)
因此，對(duì)于上述情況，如果您的CSS具有以下內(nèi)容：
.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 */
因此，即使您已經(jīng)定義了.navbar aafter .navbar ul li a，由于其特異性更高（13分），它仍然會(huì)被紅色而不是綠色覆蓋。
因此，基本上您所需要做的就是通過(guò)瀏覽器上的inspect元素來(lái)計(jì)算要更改css的元素的點(diǎn)數(shù)。在這里，bootstrap為元素指定了其css為
.navbar-inverse .navbar-nav>li>a { /* Total = 22 points */
color: #999;
}
因此，即使您的css正在加載，也要在bootstrap.css之后加載，并包含以下行：
.navbar-nav li a {
color: red;
}
它仍將呈現(xiàn)為＃999。為了解決這個(gè)問(wèn)題，引導(dǎo)程序有22分（您自己計(jì)算）。因此，我們所需要的不只是這些。因此，我將自定義ID添加到元素，即home-menu-container和home-menu。現(xiàn)在，以下CSS將起作用：
#home-menu-container #home-menu li a { color: red; } /* 100 + 100 + 1 + 1 = 202 points :) */
做完了
您可以參考此MDN鏈接。
添加回答
舉報(bào)
0/150
提交
取消