Bootstrap中"row"类的含义是什么,它与容器的区别是什么,以及它如何与col - *** - *叠加？

Question

我正在尝试按照这里的指南:http://getbootstrap.com/css/ 我似乎无法理解"行"类正在做什么.我正在尝试指南中的一些示例,例如:

<div class="row">
    <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
    <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

我尝试了它div没有它,我试图把所有东西放在一个容器里,并没有任何区别,它们看起来都一样.

任何人都可以解释"行"类的含义是什么？

Answer 1

在Bootstrap中,"row"类主要用于保存列中的列.Bootstrap将每行划分为12个虚拟列的网格.在下面的示例中,col-md-6div的宽度为"row"s div的6/12,表示50%.在col-md-4将持有33.3%,而col-md-2将持有剩余的16.66%.

<div class="row">
    <div class="col-md-6"></div>
    <div class="col-md-4"></div>
    <div class="col-md-2"></div>
</div>