Question

我混合并匹配不同尺寸sm，md，lg，看看它有什么效果：

<div class="container">

    <div class="row">

        <div class="col-sm-4" style="background: #fa6">hello 1</div>
        <div class="col-md-4" style="background: #6af">hello 2</div>
        <div class="col-lg-4" style="background: #6fa">hello 3</div>

    </div>

</div>

它应该有什么行为？

事实证明，在xs大小的情况下，所有3个div都堆叠起来，一个在另一个之上。大小为sm，宽度为768px及以上，第一个div被掩盖（变得不可见），而md，即宽度为992px，第二个div也是掩盖了。只有当它是lg时，宽度为1200px及以上，才会再次显示所有3个div。

我可以理解xs和lg个案，但sm和md如何解决？我没想到他们互相掩盖，但期待他们“流向下一行”。

例如，在sm，宽度为768px及以上时，我预计第一个div的宽度为4列，而div 2和div 3的宽度均为12列，并且“包裹”，一个接一个，到下一行。并且不应该掩盖第一个div。

没有发生。出于什么原因？

Answer 1

您可以在col类之间使用clearfix

<div class="clearfix"></div>

实施例： https://jsfiddle.net/sdLcdrom/1/

这是您正在寻找的答案吗？很难理解最终结果应该是什么，也许你应该创建一些图像来可视化网格应该如何响应不同的屏幕尺寸。

此外，您可以将多个类分配给一个div，如此

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

这样，div在中型和大屏幕上宽度的1/3，在小屏幕上宽度的1/2，在超小屏幕上宽度为1/1。

使用Bootstrap网格系统，如果您混合并匹配大小，那么可以覆盖某些列？

1 个答案: