Question

我试图设置2列，一个＆＃34; col-9＆＃34;而另一个＆＃34; col-3＆＃34;，但是我想把每个人的内心都当作自己的＆＃34; col-12＆＃34;网格。类似于：

我已尝试过这个：

<div ng-app>
    <div class="container">
        <div class="row">
            <div class="col-xs-9">
                <div class="row">
                    <div ng-repeat="i in [1, 2, 3, 4, 5, 6, 7, 8]">
                        <div class="col-xs-3 left-side">
                            {{i}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-3">
                <div ng-repeat="i in [1, 2, 3]">
                    <div class="right-side">
                        {{i}}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

我已将此jsFiddle放在一起，但正如您所见，我似乎无法解决右侧列的位置问题。

我该如何解决这个问题？提前感谢任何建议！

Answer 1

基本上，您关闭了row标记，并在您不应该使用时打开一个新标记。见：

<div ng-app>
    <div class="container">
        <div class="row">
            <div class="col-xs-9">
                <div class="row">
                    <div ng-repeat="i in [1, 2, 3, 4, 5, 6, 7, 8]">
                        <div class="col-xs-3 left-side">
                            {{i}}
                        </div>
                    </div>
                </div>
            </div>
            <!-- Removed From Here -->
            <div class="col-xs-3">
                <div ng-repeat="i in [1, 2, 3]">
                    <div class="right-side">
                        {{i}}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

注意我在</div>之前删除了一对<div class="row">和<div class="col-xs-3">。这样，第二列不会出现在第一列之下，而是在它旁边。有关说明，请参阅更新的JSFiddle。

JSFiddle

希望有所帮助！

使用Bootstrap在2列布局内设置行

1 个答案: