理解引导3中的网格系统？

Question

<div class="col-lg-9">
    <!-- Tab Content -->
    <div class="tab-content">
        <div class="tab-pane active" id="bookmark">
            <h1><center>Book Marks</center></h1>
            <div class="col-lg-3 productholder"></div>
            <div class="col-lg-3 productholder"></div>
            <div class="col-lg-3 productholder"></div>
        </div>
    </div>
</div>

如果我是-lg-9的div，这会把我的容器分成9部分吗？但是当我在col-lg-9中创建其他div时，容器的填充量并不相等.

Answer 1

如果您是col-lg-9的div，则取包装容器的9列( 12)的水平空间。

但这意味着一定有某种容器。看看这段代码。

<!-- still full width -->
<div class="col-lg-9" style="background-color:green;">R</div>

<!-- 9/12 -->
<div class="container">
    <div class="col-lg-9" style="background-color:blue;">R</div>
</div>

因此，要重新表达您的理解:如果您是div of container，那么您可以将水平空间划分为12列。每个col-??-xx类都从包装容器(有时是row或col-??-xx-div)获取xx/12的水平空间，但请注意，网格需要从最初提供12列的container或container-fluid开始。

bootstap文档在它的网格系统中有一个很好的部分，您可能会想要阅读它以获得更多信息。如果您是实际的学习者类型，我建议检查引导程序提供的网格实例代码。