Bootstrap 3嵌套行打破了设计师网格

Question

自从我开始使用Bootstrap 3以来，我一直在思考这个问题 - 顺便提一下，这是一个很棒的框架。我所描述的可能完全是错误的方式，或者这可能是一个非常常见的问题，我有兴趣了解其他开发人员和他们的看法。设计师处理这个。

下图中包含容器中的简单行（白框）。该行的col范围为10，偏移量为1，然后蓝色框位于白色框的嵌套行内。当设计师这样做时，他们只会保持所有匹配到漂亮的全宽容器网格（因为他们不会理解或需要知道嵌套行如何工作）。

然而，Bootstrap 3中的现实是在嵌套行内再次启动12个网格。这样的结果意味着我不能再很好地排列蓝框，因为它不适合嵌套网格。

所以我的问题是：其他人如何处理这个问题？我实际上是以一种我不应该使用的方式使用嵌套行，或者这是设计师需要接受教育的东西吗？或者我现在知道的更容易：）

思想？

Answer 1

在做了一些调查后，我才意识到我根本不认为这是一个问题。我上面的例子忽略的是，沟槽在嵌套行中的宽度与外部行中的宽度相同。当我在上面的图像中（以及我一直以来的想法）时，我简单地在Photoshop中调整了网格的大小，这也调整了阴沟的大小 - 这是不正确的。

我现在尝试使用这个很酷的工具http://gridpak.com/，创建了与我的嵌套行相同宽度的网格，并且看，它排列得很完美。

嵌套行中的列仍然不同，但结果将与原始设计匹配。在上面的例子中，蓝色框实际上是一个8的col范围，偏移量为2.设计师将查看该网站并“认为”它实际上是6的范围，但我们都会更清楚。

感谢大家的想法和建议 - 特别是对于他开发的整洁的jQuery工具的royalsflush，因为它可能仍然派上用场。

Answer 2

事实上，当您从设计师处获得固定指令时，12网格系统可能会在某些情况下造成困难，但是为了取得成功，您可以采取各种技巧。

因此，如果您想将蓝色块对齐在中心并且宽度为6列，您可以使用col-lg-offset-3 col-lg-6类并且不要在该白色块内使用它，或者如果您使用在该白色块中，您可以设置此类col-lg-offset-2 col-lg-8并更改左侧和右侧填充from 15px to 45px，就像您在this示例（代码here）中看到的那样。

正如您所看到的，在引导程序中一切皆有可能，您只需更改左右填充，即可创建所需的任何类型的布局。

Answer 3

我想，这是因为你在<div class="container">中完成了这一切，所以网格按照这个块进行。只需删除<div class="container">，内部区块就会与“＆＃39; main”区域对齐。网格。播放一些类和偏移量，它看起来像第一张图片。

Answer 4

我发现你的问题有几个变种，主要是因为我前一段时间遇到了同样的问题 - 也许其中一个答案可以帮到你：

Bootstrap 3 nested grid not reset to 12

Prevent bootstrap 3 from resetting nested grids / use master grid