Question

所以我来了accros this site来解释Bootstrap的功能及其网格布局。

他们解释说你应该使用row中的container和col-...中的row，但我不知道并且特别得到的是：我应该使用如果col -...正在管理他们的自我，那么row中有两个container？

我明确表示：你有这个↓

<div class="container"> <!-- First Case -->
    <div class="row">
        <div class="col-xs-6">col-xs-6</div>
        <div class="col-xs-6">col-xs-6</div>
        <div class="col-xs-6">col-xs-6</div>
        <div class="col-xs-6">col-xs-6</div>
    </div>
</div>

<div class="container"> <!-- Second Case -->
    <div class="row">
        <div class="col-xs-6">col-xs-6</div>
        <div class="col-xs-6">col-xs-6</div>
    </div>
    <div class="row">
        <div class="col-xs-6">col-xs-6</div>
        <div class="col-xs-6">col-xs-6</div>
    </div>
</div>

它仍然完全不同;它以同样的方式渲染..

您可以在那里看到结果：Fiddle

所以：我更喜欢/使用哪种方式？和有区别吗？

Answer 1

重要的是要了解.row 清除中的浮动列，如果您无法完全控制所包含列的高度，则需要这些列。< / p>

请参阅此更新的小提示，了解为什么您提供的第二个示例更简洁：

https://jsfiddle.net/DTcHh/10739/

编辑：需要注意的是，使用额外的行有一个严峻的缺点：你不能再决定要在更高分辨率下看到更多列彼此相邻。

Answer 2

当您不希望在容器中使元素自由流动时，行类可以帮助您。 Row控制其下的元素并使它们在行容器下保持流动。它是elemets的分离

查找此更新的Fiddle。

<div class="container">

        <div class="row">
        <!-- free flow under this row -->
        <div class="col-xs-6">col-xs-6</div>
        <div class="col-xs-6">col-xs-6</div>
        <div class="col-xs-6">col-xs-6</div>
        <div class="col-xs-6">col-xs-6</div>
        <div class="col-xs-6">col-xs-6</div>
        <div class="col-xs-6">col-xs-6</div>
    </div>
</div>

什么时候应该＆＃34; row＆＃34;在Bootstrap中使用

2 个答案: