1

我开始使用引导网格并试图准备好这个布局。[！[在此处输入图像描述][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 列也会出现类似问题。您能否就如何获取附加布局提供一些指示？

4

1 回答 1

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>

谢谢

于 2017-08-16T19:14:25.397 回答