html – Twitter Bootstrap 3：将列与容器内容对齐

2019年7月21日 166次阅读

我知道如何使用覆盖Bootstrap编译的CSS的CSS来解决这个问题,但在我看来,这种对齐问题是一个常见的用例,我必须误解如何使用Bootstrap框架. (第一次使用Bootstrap.)

情况：容器B(JSFiddle)中的列与容器A中的内容不对齐,因为Bootstrap为每列生成15px左/右填充.

<section class="container A">
    <h1>About Us</h1>
    <p>Lorem</p>
</section>

<section class="container B">

    <div class="col-md-3">
        <h2>Hiya!</h2>
        <p>Lorem ipsum</p>
    </div>

    <div class="col-md-3">
        <h2>Hiya!</h2>
        <p>Lorem ipsum</p>
    </div>

    <div class="col-md-3">
        <h2>Hiya!</h2>
        <p>Lorem ipsum</p>
    </div>

    <div class="col-md-3">
        <h2>Hiya!</h2>
        <p>Lorem ipsum</p>
    </div>

</section>

问题：有没有办法可以通过仅更改HTML而不使用任何CSS来使列内容与容器A内容对齐？

设置：我需要使用Twitter bootstrap 3.0.0进行上述操作.

OT：如你所见,这是我关于SO的第一篇文章,我很感激有关如何改进这个问题及其标记的任何建议.

谢谢！

最佳答案 是的,你使用了两个容器,我用两行替换了你的小提琴而用一个col-md-12类的div来占据第一行屏幕的整个宽度,在这里查看：
http://jsfiddle.net/3ELJH/3/

点赞