问题标签 [grid-system]

在我的 Bootstrap 3、3 列布局中使用 IE7 不正确地包装列而苦苦挣扎。

我的网格系统在包括 IE8 在内的所有其他浏览器中以我想要的方式工作（在反映较小设备的分辨率下堆叠）。我想弄清楚我从 IE8 到 IE7 失去了什么支持，导致它无法在 IE7 中正确换行.

显示为：

解决方案

Boostrap 3 在每个列元素上使用 padding-left/padding-right，同时还使用 <style = "width:100%;"> 来实现一致的结构。

IE7 没有正确渲染这个填充空间，而是像其他浏览器一样渲染它。即如果父容器的宽度为 960px，则子容器的宽度加上添加的边距必须小于 960。本质上是 (960/3)!=((320+margins)*3)。

为了克服这个问题，我将每一列包装在一个固定宽度的容器中。

有一行有四col-sm-3列。我需要在这一行的中心放置一些文本，这意味着文本需要跨越第二列和第三列。

这是我的 Bootply

这是一些代码：

另外：为了澄清，我需要将文本覆盖在同一行。

我试图了解一种更好的方法来使自定义逻辑适应简单网格（简单网格系统，当自定义宽度 div 大于移动布局时。我的问题是我的 div 宽度大于移动布局并溢出网格规则填充。例如，我有一个 400 像素宽度的 div，在较小的设备上，它的左右白色填充为 20 像素（网格规则），但由于它大于手持设备尺寸，我的 div 会溢出右侧 20 像素的填充.我试图了解使用网格的最佳方法。我应该创建自己的断点来缩小 div 宽度以适应移动设备吗？我应该使用覆盖溢出的 CSS 属性吗？我最好的方法是什么？我只是想要找到一个黄金标准来保持工作流程的一致性。谢谢。

HTML：

CSS：

简单网格：

我想要 1 个较大的图像和 4 个较小的图像，格式为 2x2，如下所示：

我最初的想法是将所有东西放在一排。然后创建两列，并在第二列中创建两行两列以创建 1x1 和 2x2 效果。

但是，这似乎是不可能的，或者我只是没有正确地做到这一点？

我正在尝试重新定义 col-md-4 的宽度。如果我直接进入引导文件并编辑下面的代码，它就可以工作。但是当我打开一个新的 css 文件并输入下面的代码并重新定义宽度时，它不起作用。为什么？我要解决的问题是因为在 IE7 中，我连续有 2 个项目而不是 3 个，所以我试图通过重新定义它来减小宽度，以便 3 个项目将在一行上。也许还有其他建议？

在我的样式表中，我调用了span，使用 Susy 的 mixin 来控制站点中使用的众多模块的宽度。

我现在需要在给定断点处更改网格间距宽度。而对于像 Foundation 使用的传统网格系统，我所需要的只是这样的媒体查询（假设我在元素上使用了类）：

我看不出如何使用 Susy 做同样的事情。我所有的网格样式现在都是通过 mixins 提供的，所以我不再有明确的钩子来定位跨度。

如何在断点处切换装订线宽度，而无需为我使用过的每个地方添加单独的断点span？

从 Susy 的文档看来，答案似乎是添加如下内容：

但是在我所有的模块中重复这个似乎有很多重复。

当然，这个问题不仅限于 Susy。使用 Compas 的 Vertical Rhythm 也会出现同样的问题。一旦节奏需要在断点处更改，唯一的选择是在使用垂直节奏功能的每个点显式声明断点的更改。

在这两种情况下 - 水平布局和垂直节奏，似乎都需要一个抽象层来允许集中更改跨模块传播并避免重复媒体查询的扩散。

需要明确的是，我绝不是批评这两个工具包。只是寻找使用它们的最佳方式。

Context:

The platform we are developing on forces the use of a modified version of the 960gs which we have the freedom to easily override (similar to the way child themes work in wordpress). We switched to LESS about a year back with the intent to modularize all the inherited product delivered CSS. YAY CSS preprocessors!

I was pondering porting the grid system over recently and thought... 'How awesome would it be to have a mixin that just generated the whole grid system based on some variables?' I decided it would be pretty awesome.

Question: I've take a first pass at refining it but I've hit a bit of a roadblock. I've got it down to 3 loops. but I'd like it to be just one beautiful mixin that accepts.

Here be the codes:

Called thusly:

Doesn't seem very DRY, I know...thoughts?

所以我到处寻找答案，但我找不到任何东西。我假设这是因为我尝试这样做的方式不正确，但我只是想确定一下。

我正在尝试为网络游戏（HTML、JS、CSS）创建一个交互式网格，其中每个单元格都应该在悬停/单击时更改它的填充。我需要一个规则的方形网格和一个三角形网格。我希望它是基于矢量的，以便它可以很好地缩放以适应不同的屏幕尺寸。我认为最简单的方法是创建一个图案并将其填充在一个矩形上。这是我到目前为止的代码：

对于正方形，对于三角形网格：

他们产生我需要的网格，但我不知道如何单独定位每个单元格。我猜是因为我没有找到这方面的信息，这是不可能的，应该使用其他一些解决方案。有任何想法吗？

注意：我在平面设计上发布了这个，但在发布后，我意识到这里可能更合适，我为交叉帖子道歉。

我的代码工作正常，所以我只是对使用带有我的表组件的 Bootstrap 3 网格系统感兴趣，我浏览了我找不到任何东西的文档。我确实有我的所有css文件js。我已经尝试添加row或containerdiv 标签，但它仍然没有工作。对我做错了什么有任何想法吗？

我有这个

提前致谢。

我是一个引导网格系统的新手，到目前为止，我发现您可以定义一个行以具有跨宽度的列，使得该类别（lg、sm 或 md）的总和为 12。在下面的划分中，第二个没有指定 'lg' 类别的宽度。但是，在浏览器中，它显示为跨越 12 列中的 3 列。

这里有什么规则？