无法理解各种屏幕尺寸的Bootstrap网格组合

Question

我在codeply.com上找到了一个代码片段并修改了一下以理解col-xl，col-lg，col-sm和col-xs的组合。这是代码段。

http://www.codeply.com/go/bipCPFM4mU

我是Bootstrap的新手。所以，如果代码片段以错误的方式实现并且其输出可能无法预测，请告诉我。这里说的是我的问题：

1. 对于最后3个div（div为1.1 .. 4.1，div为1.2 .. 4.2和div为1.3 .. 5.3），有两个xl规范，即col-xl-3和col-xl-6然后为什么是否只考虑col-xl-6而不考虑col-xl-3（对于 xl 屏幕）？我试图颠倒顺序，但输出没有区别。所有* .1部分和* .2部分都在第一行，然后* .3在第二行。
2. 当您在另一个窗口中打开输出并调整宽度以使屏幕大小为 lg 时，1.3,2.3,3.3和4.3将消失。而且，其余元素如何计算列大小。我假设它们占据全宽，因为我没有为col-lg指定任何东西。

我希望我的问题有道理。我试过看了很多例子，但它没有回答我的问题并且帮助我理解它为什么表现得像它的行为。

有人可以帮忙吗？

谢谢你， 贾扬

Answer 1

1. 您不能在相同大小的类别中包含2个声明 - xl，因此在xl宽度处声明3列和6列将始终只生成一个，因为它们只是宽度声明。我认为这可能是一个错字，应该是col-xl-3 col-lg-6 col-sm-12。

2. 它们没有消失，它们只是被5.3隐藏，它在屏幕尺寸上是全宽并且漂浮在它们前面。如果你在一个类中包含5.3 =＆＃34; row＆＃34;或者说清楚：两种风格你都会看到1.3 - 4.3。

Bootstrap布局很难在最初点击之前完成。

希望有所帮助：）