Bootstrap - 相应地对齐两行/填充

Question

我想用twitter bootstrap创建一个响应式网页。我有一张应该是一定宽度的照片和一张背景颜色的条形，它应该具有相同的宽度，并且两者都应该在左侧和右侧对齐。

由于Bootstrap使用padding-left:-15px; padding-right:-15px;我有这个效果：

http://codepen.io/anon/pen/thsgC

这让我很困惑。如何相应地将这两行与Bootstrap对齐，而不会覆盖bootstraps自己的css类.row和.col-xs-12

感谢。

Answer 1

在Bootstrap中，col-*类上有填充。要绕过它，你可以覆盖它（不推荐）或将背景颜色div放在另一个div中：

<div class="col-xs-12">
    <div class="navigation">color</div>
</div>

喜欢这个http://codepen.io/anon/pen/ixcmg

Answer 2

实际上两行都是正确对齐的。问题出在第一行，图像元素是col-xs-12元素的子元素，而在第二行中，navigation类在具有col-xs-12元素的同一div元素上

尝试将navigation类放在col-xs-12的子元素中，就像这样

<div class="row">
    <div class="col-xs-12">
        <div class = "navigation">
            color
        </div>
    </div>
</div>

也不是覆盖bootstrap自己的类的好习惯，你可以为应该用来覆盖bootstrap css属性值的元素提供额外的类。