如何對齊Bootstrap中的文本3 Jumbotron一直到左邊

我試圖讓我的Jumbotron（Bootstrap 3）中的文本一路向左。我嘗試了填充和對齊，但似乎沒有任何工作：Jumbotron背景的左開始和文本之間總是有一段距離。如何對齊Bootstrap中的文本3 Jumbotron一直到左邊

我嘗試添加到自定義CSS文件：

.jumbotron { 
    padding-left: 0px; 
    padding-top: 3px; 
    padding-bottom: 3px; 
}

頂部和底部的工作。左不。

2014-05-25 Amarundo

這是因爲引導CSS樣式：

.container .jumbotron { 
padding-left: 60px; 
}

嘗試覆蓋它。

2014-05-25 19:35:19 user3127896

請參閱我剛添加的CSS代碼。缺少容器？但是頂級和底層的工作！我錯在哪裏？ – Amarundo

奇怪的是，它適用於我，嘗試填充左：0px！重要; – user3127896

！重要工作。大。 – Amarundo

而不是重寫jumbotron的CSS，爲什麼不把自己的類添加到元素中，並按照您喜歡的方式使用自己的CSS添加樣式？即根本不要使用Bootstrap的jumbotron類 - 只是從頭開始設計它。

2014-05-25 20:44:56

不幸的是，這將無法正常工作，因爲我的答案中提到的特異性 - 請參閱示例：http://www.bootply.com/XpnV5r1X9E –

我建議不要使用jumbotron。人們可以輕鬆地製作出符合自己的確切造型需求的自定義「my-jumbotron」課程。那麼就不需要擔心特異性。 –

啊，是的，你說得對。我以爲你的意思是你自己的班級被添加到jumbotron中。 –

根據descendant combinators，您正在捕獲CSS特異性。基本上.container .jumbotron{...}攜帶更多的重量比單獨.jumbotron{...}，所以最簡單的事情是

.container .jumbotron { 
padding:0px 3px; 
}

重寫它。然而，有許多的超大屏幕內後裔組合子，（h1-6，.h1-6，P等）你必須警惕...要想看到這個動作，在jumbotron的頂部扔一個h1，然後把你的頭髮拉出來試圖爲它定製填充！

2014-05-25 21:46:09

回答