bootstrap网格列分成不同的行,每个第二行分成不同的列并位于中心

时间:2017-08-16 18:59:59

标签: bootstrap-grid

我开始使用自举网格,并试图准备好这个布局。[![在此输入图像描述] [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列。你能否就如何获得附加布局给出一些指示?

1 个答案:

答案 0 :(得分:0)

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>

由于