问题标签 [grid-system]

最近我一直在学习 flexbox 以及如何制作自己的网格系统。当使用浮动制作网格系统时，我们确定每个布局的列数和每列的百分比宽度。但是在使用 flexbox 的时候，我看到的所有布局教程都只是简单的使用flex-direction: row;andflex: 1 列，让它们都大小相等，间距相等，居中并在一行中。但是当我在 github 上查看 flexboxgrid 源代码时，它们使用的原理与 bootstrap 3 相同。它们具有不同屏幕尺寸的列，12 列和flex-grow,shrink被禁用。相反，每列都以宽度百分比确定，例如col-xs-1 max-width: 8.33%.

现在我想知道这两种技术有什么区别，哪一种更可取。我的意思是确定每列的宽度需要大量计算，而使用 flex grow 属性只是用相同大小的列和排水沟来满足主轴上的整个视口。

我已经被 React 应用程序周围的整个生态系统所淹没，我想采取最简单（和体面）的方式来使用带有 Material-UI 的网格系统。

它是哪一个以及如何用几句话来使用它？

（我读了很多关于这个话题但仍然不确定，这就是我问这个确切问题的原因）

谢谢！

小提琴：https ://jsfiddle.net/uatzust3/

这是我的问题的小提琴，你会观察到孩子们没有留在父 div 内card，而且我希望divs 占据他们没有占据的父母的全宽。

另外，我应该在哪里学习最佳实践？我是社区的新手。提前致谢。

左边的 div(black_container)内容少，但要一直按照右边的 div 的宽度排列高度，(content_container)同时留在carddiv 里面。

我无法将我的 div 与引导程序对齐。中间的大 div 正在推动两侧的盒子。我怎样才能实现这种布局？

我想要实现的div的布局：

我的网格中的第三个元素没有向左侧中断，而是向右中断。我相信这是因为列的高度不同。我不能简单地附加 2 行，因为代码的构建方式应该显示为 1x4、2x2，然后是 4x1。我不想通过 javascript 或 css 根据屏幕大小来显示和隐藏行，因为我宁愿让网格系统按应有的方式工作。附件是我的代码示例供参考。

我怎样才能在容器的一侧有一个表格，而在另一侧有一个文本段落？我想如果我把它全部放在一个有一行两列的容器中，它会起作用，但由于某种原因，段落文本显示在左侧的表单下方。

这是根据我现在拥有的代码所发生的事情的屏幕截图。

我刚开始学习编码，所以如果这看起来是一个愚蠢的问题，我深表歉意。我四处寻找，在任何地方都找不到答案。

先感谢您！

我有一个容器类的 div 元素，如下所示：

正如您从我的代码中看到的那样，如果我在内部 div 上执行一个 foo 循环，那么每行应该显示 3 个项目。并且 span 标签必须为每个对象具有不同的类属性。

它会是这样的：

但这会导致网格视图系统崩溃。那么我该怎么做呢？我的重点是跨度标签。我想显示具有适当类的对象。

正确的形式（这就是我想要的）：

正确的形式

不正确的形式（这是现在的样子）：

表格不正确

** 更新 ** 正确代码（为了更好的实践）：

我无法对齐嵌套行。见下图。我在 md 和 lg 屏幕上有 1 行为 9，3 行为 3。9+3=12。在 sm 屏幕中，我希望第一行为 12，其他 3 行位于其下（4+4+4）。

https://s28.postimg.org/f0xa2380t/helpbootstrap.png

https://jsfiddle.net/proabid/qLg72vns/

我有以下网格系统，它们是 3 行，每行在大屏幕中有 3 个项目，我想编辑代码，使它们成为 xs 屏幕每列中的 2 个项目，但它们被遗漏了，如何我可以这样做吗？

从这里的文档中说，它支持 IOS 和 Mac 桌面上的 Safari。

但为什么这是我在我的 Safari 上得到的呢？

这是我的代码：

我环顾四周，但还没有找到任何修复方法。有任何想法吗？

如果我将它升级到第 4 版，那就更糟糕了——它在 Chrome 上崩溃得可怕！

Foundation呢？它对所有浏览器都有更好的网格系统支持吗？

请注意，您必须在整页上运行我的代码才能在 Chrome、Opera 和 Firefox 上看到正确的网格布局。