问题标签 [grid-system]

我在 Bootstrap 的网格系统中显示了 8 张图像。感谢该代码：

在 lg、md 和 sm 屏幕尺寸上，它是这样显示的（“X”代表图像）：

XXXX

XXXX

在 xs 屏幕尺寸上，像这样：

X

X

X

X

X

X

X

X

我想实现：

在 lg、md 和 sm 屏幕尺寸上显示：

XXXX

XXXX

并在 xs 屏幕尺寸上显示：

XX

XX

XX

XX

有谁知道怎么做？

我还在开始学习Bootstrap，对网格系统感到困惑。网格系统的描述说

Bootstrap 包括一个响应式、移动优先的流体网格系统，随着设备或视口大小的增加，它可以适当地扩展到12 列。

但是为什么在后面的例子中，他们会这样表现呢？

我知道 xs 是超小型设备而 md 是针对中型设备的，但是 xs 的类为什么是“col-xs-12”和“col-xs-6”？我的意思是，与 Bootstrap Grid System 的定义相比，它们现在最多添加 18 列。有人可以请教我吗？

我想要一个具有以下响应式布局的页面：

图 1) 带有 3 个框的响应式页面布局（在中小型屏幕上）

图 2) 带有 3 个框的响应式页面布局（在宽屏上）

目标是使该页面具有响应性，以便每当屏幕太宽时，框 3 将跳到框 2 旁边（如图 2 所示）。为此，我使用 Bootstrap 的网格系统，为框 1 分配“8”跨度，为框 2 和 3 分配“4”。它按照我描述的方式工作。现在我想修复 Box 2 和 Box 3 的位置，所以当我滚动页面（查看 Box 1 的内容）时，我会在我的视口中看到 Box 2 和 3，我不想让 Box 1 可滚动！我希望整个页面滚动！您知道任何可以处理这种情况的 Bootstrap 解决方案吗？（我想保持整个页面的响应式布局）

这是我对该页面的基本代码：

现在我可以使框 1 可滚动，但它会将滚动条放在框 1 旁边，但我希望它位于页面的右侧，因此整个页面滚动，但框 2 和框 3 是固定的。同时，在大屏幕上，他们会改变他们的位置，所有 3 个盒子将彼此相邻！

有什么建议吗？

可以在剑道 ui 的模态窗口中使用引导形式吗？我需要在许多列中输入的表单。我尝试像在普通 html 文件中一样使用默认引导程序，但这不能正常工作。谢谢

我在这里的第一篇文章，

我正在 Photoshop 中设计一个布局，我知道有一个图层很重要，我有我的网格来根据它设计元素。

我在网上搜索 psd 下载并用于我的设计，我非常困惑。所以我只想知道在选择引导网格系统时必须考虑哪些标准。

要解决的方面让我感到困惑：

• 我应该选择哪个 Bootstrap 版本？并且基于什么？
• 列数？并且基于什么？
• 我应该选择哪种排水沟尺寸？基于什么？

请帮我解决这个问题，我不断看到数百万种不同的引导网格系统，我只是不知道如何选择。

感谢大家

在大视口中是否有任何方法可以解决这个问题：

在 xs 视口对此：

或者这是否超出了 BS 网格系统的范围——不需要重新生成内容以包含嵌套网格？

这些图像显然不是按比例绘制的，但应该足以让我了解我想要做什么。Col 2 甚至可能高于 3、4 和 5。无论哪种方式都无关紧要。

谢谢！

我一直在尝试解决我的网格问题，但我不确定为什么我的列没有堆叠在一起。当我用一个容器制作一个 div 并在其中一行然后是 12 列时，这些列占据了整个宽度，然后在下面放样

我想实现一个概览页面，其中多个面板自动依次排列。我目前的结果可以在这张图片上看到：

我需要实现的是，左下角的第三个面板跳起来并在第一个面板之后对齐。不幸的是，我不想将页面嵌套成两列，因为在较小的屏幕上，面板的大小和排列会发生变化。此外，页面下方的其他面板可能具有与此处看到的不同的尺寸（即 8:4）。

有没有简单的解决方案？谢谢！

我正在使用语义 UI，无法正确设置网格。根据文档，语义 UI 使用 16 列，我试图three在左侧有一列宽度为 ，在它旁边有一列宽度为thirteen. 这是它的外观（图片被裁剪）：

我已经使用 Bootstrap 很长时间了，现在尝试使用 Semantic UI。我错过了什么？演示

我刚开始学习 css，bootstrap 是最流行的 css RWD 框架。我只是好奇流体网格系统是如何实现的？？

并且无意中学会了 wip w3c css 标准多列布局。和网格系统是同一个概念吗？当所有浏览器最终确定并完全实现它时，它是否会使所有网格系统库过时？