Question

也许这是一个非常简单的问题，但我想知道您是否可以根据窗口大小设置多个布局，并根据用户当前窗口大小进行应用？

现在我使用带有C＃的bootstrap，我设置了一个标准大小，如col-md-#，然后让下面的所有内容分成几块，因为元素开始重叠。这使得网站在小屏幕上至少可读，但由于一切都被拆散，它仍然是一团糟。

示例md / lg布局

enter image description here

移动到较小的屏幕（sm / xs）然后将这些元素分解成片段，这些片段垂直级联。

enter image description here

我想知道的是，如果我可以设置col-xs/sm-12，然后重新排列元素（或重新调整像图像/表格/ div这样的项目）以更好地适应较小的屏幕。从不同的屏幕尺寸移动时，基本上具有/显示不同的布局。

对于较小的屏幕，是否有可能不是将元素分开（如上所述），实际上为较小的屏幕尺寸（下图）运行不同的样式？

enter image description here

TLDR：引导程序当前是否支持多个由窗口大小决定的布局，而不是只有一个布局，并且为了更小的东西而将所有内容分开？

如果是这样，可以给出一个简单的例子，显示两个布局是由不同的窗口大小制定的。

Answer 1

是

如果你使用bootstrap 3，你可以简单地定义xs的布局，然后逐步扩展直到更大的接管。

例如

col-xs-6 col-md-12
col-xs-6 col-md-12
col-xs-12
col-xs-12

因此，当它在xs上时，它将显示为6列，然后中等显示将显示在12列上。