Html 引导3嵌套行打断设计器网格

自从我开始使用Bootstrap3以来，我一直在思考这个问题——顺便说一句，这是一个很棒的框架。我所描述的可能是完全错误的方式，或者这可能是一个非常常见的问题，我想看看其他开发人员和设计师如何处理这个问题

下图在容器中包含一个简单的行白色框。该行的列跨度为10，偏移量为1，蓝色框位于白色框的嵌套行内。当设计人员这样做时，他们只是将所有内容与漂亮的全宽度容器网格保持匹配，因为他们不理解或不需要知道嵌套行是如何工作的

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

所以我的问题是：其他人如何处理？我是否真的以一种我不应该的方式使用嵌套行，或者这是设计师需要学习的东西？或者我现在意识到有什么更容易的事情：

---

想法？

事实上，12网格系统在某些情况下可能会造成困难，因为您的设计人员提供了固定的指令，但为了成功，您可以使用各种技巧

因此，如果您想将蓝色块对齐，使其位于中心，宽度为6列，您可以只使用col-lg-offset-3 col-lg-6类，而不在白色块内使用它，或者，如果您在白色块中使用它，您可以设置这个类col-lg-offset-2 col-lg-8，并将左右填充从15px更改为45px，就像您在示例代码中看到的那样

---

正如您所看到的，在引导中一切都是可能的，您只需更改左右填充，就可以创建所需的任何类型的布局。

我想，这是因为您在一个简单的过程中完成了整个过程，所以网格按照此块进行。只需移除，内部块将捕捉到“主”网格。在类和偏移上玩一点，它会像第一张图片中那样

我发现了你问题的几个变体，主要是因为我不久前遇到了同样的问题-也许其中一个答案可以帮助你：

---

在做了更多的调查之后，我才意识到这根本不是一个问题。我上面的示例忽略的是，嵌套行中的边沟宽度与外部行中的边沟宽度相同。当我在上面的图片中这样做时，我只是简单地在Photoshop中调整了网格的大小，这也调整了排水沟的大小——这是不正确的

我现在尝试使用这个很酷的工具，创建了与嵌套行相同宽度的网格，瞧，它排列得非常完美

嵌套行中的列仍将不同，但结果将与原始设计匹配。在上面的示例中，蓝色框实际上是偏移量为2的8列范围。设计师会看看这个网站，认为它实际上是一个6列跨度，但我们都会知道更好

---

感谢大家的想法和建议，尤其是royalsflush开发的简洁的jQuery工具，因为它可能仍然派上用场。

你的问题到底是什么？？顺便说一句，行自动具有col span 12Anyway来执行此操作，而不更改左/右填充？我希望的可能只是懒惰，避免每次开始嵌套行时调整所有填充。我相信在Bootstrap v2中确实可以做到这一点，但他们改变了它？我真的不知道，我从来没有使用过v2。对我来说，调整填充物没什么大不了的。我用bootstrap取得了很好的效果，我用它做了我想做的一切，直到现在。这就是我所能说的，如果你觉得这有帮助的话……我试着移除容器，但是，正如我所怀疑的，嵌套列的位置是从嵌套行而不是祖父母行开始的，有趣的是，第一篇帖子实际上是我写的！：在我开始使用Bootstrap之前，我就写过这篇文章，因为我预期自己会遇到这个问题——这正是我所处的位置。你的脚本看起来很有用-你有没有在更大的页面或移动设备上测试过它，看看它是否会对设备产生很大影响，从而重新计算所有内容？我没有做过很多测试，只是在我目前的专业gig labsynapse.com和桌面上测试过，这是我们的重点-从来没有出现过问题；不过，我应该知道，这是一个有用的工具。关于时间，我还必须对它进行基准测试，是的，但它是一种在文档就绪时对每个请求运行一次的脚本——我还可以指出，由于DFS算法的性质，它在DOM中的元素数量上是启用的。很抱歉我的回答信息不灵通-如果我做更多的测试和基准测试，我可以给你回复。哦，谢谢你在回答中可爱的提及。是的，很好的评论。尽管有时，在进行调查时看到问题和答案对其他人来说是有益的，这样可以避免问更多的问题 问题。