css - 使用 Bootstrap 在 2 列布局中设置行

Question

我正在尝试设置 2 列，一个是“col-9”，另一个是“col-3”，但我想将每个列的内部视为它自己的“col-12”网格。类似于:

Grids inside 2 Columns Layout visual

我试过这个:

<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

希望对您有所帮助!