Bootstrap - 一行有两列，并将所有其他列放在第一行的第二列下，

Question

对不起这个令人困惑的标题感到抱歉。在理论上，我想做的事情应该很容易。

我认为去除它的最佳方法是向您展示一张图片：

顶部有1行，有2列，之后的每一列都应该位于第二列之下......

这可行吗？

由于

Answer 1

这就是“抵消”类的用途。 col-md-offset-1应用于第二列中的元素（作为其他类）应该执行您想要的操作（对于中等视口大小）

（可能你使用更宽的列，类似col-md-3的类跨越网格的三列。在这种情况下，你需要col-md-offset-3作为偏移量）

Answer 2

尝试使用HTML display : flex进行此类布局。例如，请参阅下面的链接。 https://css-tricks.com/snippets/css/a-guide-to-flexbox 请尝试以下代码段。

<div class="row-fluid">
    <div class="span4"><div class="well">1</div></div>
    <div class="span8">
        <div class="row-fluid">
            <div class="span6"><div class="well">2</div></div>
        </div>
        <div class="row-fluid">
            <div class="span6"><div class="well">3</div></div>
        </div>

        <div class="row-fluid">
            <div class="span6"><div class="well">4</div></div>
        </div>
    </div>
</div>

Answer 3

使用col-md-offset- * class

<div class="row">
    <div class="col-md-offset-6" style="text-align=center;"><p>fixed column</p></div>
    <div class="col-md-offset-6" style="text-align=center;"><p>col</p></div>
</div>
<div class="row">
    <div class="col-md-offset-6" style="text-align=center;"></div>
    <div class="col-md-offset-6" style="text-align=center;"><p>col</p></div>
</div>
<div class="row">
    <div class="col-md-offset-6" style="text-align=center;"></div>
    <div class="col-md-offset-6" style="text-align=center;"><p>col</p></div>
</div>

了解更多信息：

Bootstrap Grid System - Bootstrap Grid Examples -