Question

我还在开始学习Bootstrap，我对网格系统感到困惑。网格系统的描述说

Bootstrap包含一个响应式移动第一流体网格系统，随着设备或视口大小的增加，可以适当地扩展到 12列。

但接下来的例子怎么样，他们就这样表现出来了？

<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>

我知道xs是超小型设备而md是中型设备但xs的类是怎么样的“col-xs-12”和“col-xs-6”？我的意思是，与Bootstrap网格系统的定义相比，它们现在最多可以添加18列。有人可以赐教我吗？

Answer 1

你弄错了。在超小型设备中，由于

import re
result = re.match('^4321.*', value)
if not result:
    print('no match!')

类，第一个div将填充整行，第二个将放在其下方，仅包含half行。如果bootstrap网格系统中的整数之和大于12，则使网格系统超过18的列将被放置在下一行。

按代码解释：

col-xs-12

在这种情况下，两个<div class="row"> <div class="col-xs-4"></div> <div class="col-xs-8"></div> </div>元素会粘在一起，因为.col-xs和4+8 = 12只会包含12列。

.row

现在<div class="row"> <div class="col-xs-5"></div> <div class="col-xs-8"></div> </div>列将位于第一行，.col-xs-5将落入第二行。

有关更多说明，请参见下图：

Answer 2

xs＆amp; md设置它们的固定大小，因此，在lg（大屏幕）中，你可以使用col-xs-12 col-xs-6将它设置为它的大小。所以，这是错误的：＆＃34;与Bootstrap网格系统的定义相比，它们现在最多可以添加18列。＆＃34;

试试这个：

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