如何将Bootstrap 3 Jumbotron中的文本一直对齐到左侧

Question

我正试图将我的Jumbotron（Bootstrap 3）中的文本一直放到左边。 我尝试填充和对齐，但似乎没有任何工作：在Jumbotron背景的左开头和文本之间总是有一段距离。

我尝试添加自定义css文件：

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

上下工作。左边没有。

Answer 1

这是因为Bootstrap css风格：

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

尝试覆盖它。

Answer 2

基于descendant combinators，你正在成为CSS特异性的牺牲品。基本上.container .jumbotron{...}比单独使用.jumbotron{...}更重要，所以最简单的事就是用

覆盖它

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

然而，在jumbotron中有许多后代组合器，（h1-6，.h1-6，p等）你需要注意......为了看到这一点，抛出一个{{1}在jumbotron的顶部，拉出你的头发试图自定义填充！

Example Bootply

Answer 3

为什么不将你自己的类添加到元素中，并使用自己的CSS按照自己喜欢的方式设置样式，而不是覆盖jumbotron的CSS？也就是说，根本不要使用Bootstrap的jumbotron类 - 只需“从头开始”设置它。