你可以根据窗口大小使用 twitter bootstrap 构建多个布局吗？答案

【问题标题】：Can you build multiple layouts with twitter bootstrap based on window size?你可以根据窗口大小使用 twitter bootstrap 构建多个布局吗？
【发布时间】：2014-12-18 08:58:06
【问题描述】：

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

现在我在 C# 中使用 bootstrap，并设置了一个标准大小，例如 col-md-#，然后让下面的所有内容随着元素开始重叠而分崩离析。这使得该网站至少在小屏幕上可读，但它仍然是一团糟，因为一切都被打破了。

示例 md/lg 布局

移动到较小的屏幕 (sm/xs)，然后将这些元素分成几块，垂直层叠。

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

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

TLDR：bootstrap 目前是否支持由窗口大小决定的多种布局，而不是只有一种布局，然后将所有内容拆分为更小的布局？

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

【问题讨论】：

?我不明白这个问题....为什么不使用 col-xs-6 的值？

标签： html css twitter-bootstrap

【解决方案1】：

是的。

如果您使用 bootstrap 3，您可以简单地定义 xs 的布局，然后将其放大直到更大的东西接管。

例如

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

所以当它在 xs 上时，它将显示为 6 列，然后 medium up 将显示为 12 列。

上面的描述在这里更好http://getbootstrap.com/css/#grid

你也可以使用push/pull来调整排序http://getbootstrap.com/css/#grid-column-ordering

【讨论】：

col-xs-6 col-md-12 也是这样说：当在 md+ 上时，将此元素显示为 12 的网格大小，而如果它在 sm，则打破元素，当它到达 xs 时把它做成 6 号网格？如果不是，那我就糊涂了哈哈
几乎，它首先适用于移动/最小。因此，当您说xs 时，这会将列应用于所有内容，直到遇到更大的问题。所以如果你做了col-xs-12 col-md-6。 xs 和 sm 都将是 12。然后md, lg, xl etc，将是6。是不是更清楚了？
好吧，这是有道理的。所以最重要的是，我想我正在寻找一种方法来几乎单独显示像div 这样的元素。比如说我有两个 div，一个在内部重新排列以在较小的尺寸上看起来更好，一个重新排列在大屏幕上看起来更好。有没有办法在divs 的class 中说如果屏幕尺寸为 md/lg 则显示其 div，否则隐藏它，以及较小屏幕的签证诗句？基本上让引导程序在网格调整大小的基础上处理元素的显示/隐藏，以便更好地查看。
是的，它们都列在他们的 css 页面上 -> getbootstrap.com/css/#responsive-utilities