Question

我在BootStrap CSS框架中相当新，我对BootStrap如何处理网格划分空间有以下疑问。

在我看来（如果我说错了，请纠正我）。

1）网格组件用于将空间划分为流体列（因此列宽度以百分比表示）

2）它基于12列（这个断言的确切含义是什么？我最多可以有12列？还是其他什么？）

3） 12列表示 100％的可用空间，因此可以使用以下“转换表”来定义列的空间：

.col-sm-1  { width: 8.333333333333332%;  }
.col-sm-2  { width: 16.666666666666664%; }
.col-sm-3  { width: 25%;                 }
.col-sm-4  { width: 33.33333333333333%;  }
.col-sm-5  { width: 41.66666666666667%;  }
.col-sm-6  { width: 50%;                 }
.col-sm-7  { width: 58.333333333333336%; }
.col-sm-8  { width: 66.66666666666666%;  }
.col-sm-9  { width: 75%;                 }
.col-sm-10 { width: 83.33333333333334%;  }
.col-sm-11 { width: 91.66666666666666%;  }
.col-sm-12 { width: 100%;                }

所以我怀疑是：

如果我有以下网格：

<div class="row">
 <div class="col-sm-6">
  ...
 </div>
 <div class="col-sm-3">
  ...
 </div>
 <div class="col-sm-3">
  ...
 </div>
</div>

这意味着我有一个由单行组成的“表”，该行分为3列，并且：

FIRST COLUMN（左侧）填充50％的空间

第二列（在中间）填充25％的空间

第三栏（右侧）填补空间的25％

我的推理是否正确？这是BootStrap Grid组件工作的方式吗？

TNX

安德烈

Answer 1

在我看来，你是完全正确的。所以我只能回答以下问题：

2）它基于12列（这个断言的确切含义是什么？我最多可以有12列？还是其他什么？）

我认为12是选择数字，因为它很好地被其他数字（1,2,3,4,6,12）整除。但这并不意味着，由于您可以嵌套元素，因此您最多只能拥有12列：

<div class="row">
    <div class="col-sm-1">
        <div class="col-sm-6"></div>
        <div class="col-sm-6"></div>
    </div>
    <div class="col-sm-1">
        <div class="col-sm-6"></div>
        <div class="col-sm-6"></div>
    </div>
    <div class="col-sm-1">
        <div class="col-sm-6"></div>
        <div class="col-sm-6"></div>
    </div>
    <!-- and so on (in sum 12 times) -->
</div>

这将产生24列。当然，您可以随意修改以获得您希望的列数和宽度。

Answer 2

<div class="row">
 <div class="col-sm-6">
  ...
 </div>
 <div class="col-sm-3">
  ...
 </div>
 <div class="col-sm-3">
  ...
 </div>
</div> 

FIRST COLUMN (on the left) fill the 50% of the space

SECOND COLUMN (in the center) fill the 25% of the space

THIRD COLUMN (on the right) fill the 25% of the space

只有当容器宽度为768px或更高时，您的假设才是正确的。

一旦宽度小于768px，每列变为100％。

阅读Grid-Option。您可以在jsfiddle进行测试。

enter image description here

如果希望每个列的宽度因容器宽度而异，则可以堆叠这些类。例如，

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

请参阅jsfiddle

上的演示

关于网格BootStrap组件如何工作的一些疑问？

2 个答案: