如何在引导程序中使用多列和多行的框创建网格? [英] How to create a grid in bootstrap with boxes of multiple columns and rows?

问题描述

我很难在 bootstrap 中设置一个似乎无法分解成更小的方块的网格.检查所需网格的图像:基于引导程序的网格

I have difficulty in setting up a grid in bootstrap that does not seem to be able to be dissected into smaller squares. Check the image for the desired grid:bootstrap-based grid

推荐答案

如果没有从本质上否定引导网格提供的好处的令人厌烦的变通方法，这是无法完成的.引导网格的主要目的是灵活(根据屏幕大小更改内容布局).因此，没有理由实现您所描述的功能.想象一下，尝试组织附加图像中的数据以在不同尺寸的设备上以不同的方式显示 - 这几乎是不可能的.

Without tiresome workarounds that essentially negate the benefits that the bootstrap grid offers, this cannot be done. The main purpose of the bootstrap grid is to be flexible (changing the content layout depending on the screen size). For this reason, there was no reason to implement the functionality you've described. Imagine trying to organize the data in the attached image to display differently on different sized devices - it would be near impossible.

然而，使用 FlexBox，可以实现更具体的类似网格的布局.我没有看到您描述的布局是使用 FlexBox 的问题.但是我应该警告你，虽然 FlexBox 变得越来越流行，但它仍然没有被所有平台完全支持.正如您在此处看到的:http://caniuse.com/#feat=flexbox，它是 技术上支持大多数主要浏览器，但您会很快注意到它们之间的行为差​​异.因此，目前在所有现代浏览器中实现 FlexBox 以相同的方式工作可能有点麻烦(特别是对于布局的新手)，但这当然不是不可能的.有关 FlexBox 的更多信息，请参阅 https://css-tricks.com/snippets/css/a-guide-to-flexbox/.

However, using FlexBox, more specific grid-like layouts can be accomplished. I don't see the layout you've described being a problem using FlexBox. But I should warn you that while FlexBox is becoming more popular, it is still not fully supported across all platforms. As you can see here: http://caniuse.com/#feat=flexbox, it is technically supported on most major browsers, but you will quickly notice behavioral differences across them. Thus, implementing FlexBox to work the same across all modern browsers at this time can be a bit of a hassle (especially for people new to the layout) but it certainly is not impossible. For more info on FlexBox, see https://css-tricks.com/snippets/css/a-guide-to-flexbox/.

这篇关于如何在引导程序中使用多列和多行的框创建网格?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！