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>

由于

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

1 个答案: