Bootstrap元素有2列？

Question

<div class="col-sm-6 col-md-4">

上述bootstrap元素在其元素中有2列（col-sm-6＆amp; col-md-4）。 这是什么意思？

Answer 1

每个bootstrap元素可以包含另一个row和列。例如，如果你的元素是100px宽，你有4和6列，那么你得到40px和60px，当然减去填充。

请参阅https://getbootstrap.com/examples/grid/

上的Two columns with two nested columns

Answer 2

.col-md-前缀在中型设备上生效（≥992px） .col-sm-前缀在小型设备（≥768px）

上生效

您可以在http://getbootstrap.com/css/#grid-options

上详细了解相关信息

同时使用这两个类可以让您根据用户的设备/分辨率实现不同的行为。

例如，使用相同的标记而没有额外的CSS，您可以在更大的分辨率上并排放置三列，并排放置两列，在较小的分辨率下放置一列

您可以在codepen上查看和使用此示例：http://codepen.io/rebagliatte/pen/GNKvOB

Answer 3

• col-xs-* ---＆gt;超小型设备（手机，最高480px）
• col-sm-* ---＆gt;小型设备（平板电脑，768px及以上）
• col-md-* ---＆gt;中型设备（台式机，992px及以上）
• col-lg-* ---＆gt;大型设备（大型台式机，1200px及以上）

上面的每个课程都会根据屏幕尺寸开始。

所以在你的情况下col-sm-6＆amp; col-md-4。

您的容器占用6列用于小型设备，4列用于中型设备及以上。

假设屏幕大小是由于我们没有默认指定的任何东西，它会占用超小设备，它会占用12列的全宽度。

希望这会有所帮助：）