引导网格列分为单独的行，每第二行分为单独的列并位于中心

Question

我开始使用引导网格并尝试准备好这个布局。[![在此处输入图像描述][1]][1]

我有点困惑如何将三个主要列分成单独的部分，以便我可以如图所示放置相应的文本/图像

我开始创建一个基本布局，但我无法将其设置到正确的位置：

<div class="row" style="border: 1px solid;">
    <div class="col-xs-4"> 
        <div class="col-xs-12 col-md-offset-4">
            XXX
        </div>
        <div class="col-xs-12 ">
            <div class="col-xs-12 ">
                first column second
            </div>
            <!--<div class="col-xs-12 ">
                first column second
            </div>-->
        </div>

    </div>

    <div class="col-xs-4" style="border: 1px solid;">
        <div class="col-xs-12 ">
            second column first
        </div>
        <div class="col-xs-12 ">
            second column second
        </div>

    </div>

    <div class="col-xs-4" style="border: 1px solid;">
        <div class="col-xs-12 ">
           third column first
        </div>

    </div>
</div>

我试图集中第一列中的第一行，这看起来不错。但是，我无法将第二行分成单独的列。第 2 列和第 3 列也会出现类似问题。您能否就如何获取附加布局提供一些指导？

Answer 1

Bootstrap 使用 12 列布局。因此，如果您想要 2 个相等的列，则需要将每个值设置为 6。

将您的示例用于您要放置的第二列

<div class="col-xs-4" style="border: 1px solid;">
    <div class="col-xs-6 ">
        second column first
    </div>
    <div class="col-xs-6 ">
        second column second
    </div>

</div>

谢谢