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

【问题标题】：Bootstrap 3 nested rows breaks designers gridBootstrap 3 嵌套行打破了设计师网格
【发布时间】：2014-05-08 13:13:51
【问题描述】：

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

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

但是，Bootstrap 3 中的实际情况是 12 个网格在嵌套行内重新开始。这样做的结果意味着我不能再很好地排列蓝色框，因为它不适合嵌套网格。

所以我的问题是：其他人如何处理这个问题？我实际上是在以我不应该的方式使用嵌套行，还是设计师需要接受教育？或者我现在知道有没有更容易的事情:)

想法？

【问题讨论】：

你的问题到底是什么？？顺便说一句，行自动具有 col span 12

标签： html css twitter-bootstrap-3 photoshop

【解决方案1】：

在进行了更多调查后，我才意识到我根本不认为这是一个问题。我上面的示例忽略的是，嵌套行中的排水沟与外行中的宽度保持相同。当我在上面的图像中进行操作时（以及我一直以来的想法），我只是在 Photoshop 中调整了网格的大小，这也调整了排水沟的大小——这是不正确的。

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

嵌套行中的列仍然会有所不同，但结果将与原始设计相匹配。在上面的示例中，蓝色框实际上是 8 列跨度，偏移量为 2。设计师会查看该站点并“认为”它实际上是 6 列跨度，但我们都会知道得更多。

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

【讨论】：

是的，公平的评论。虽然有时其他人在进行调查时看到问题和答案是有好处的，这样可以避免提出更多问题。

【解决方案2】：

确实，当您从设计师那里得到固定指令时，12 格系统在某些情况下可能会造成困难，但您可以采取各种技巧来取得成功。

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

如您所见，在 bootstrap 中一切皆有可能，您只需更改左右填充，即可创建所需的任何类型的布局。

【讨论】：

无论如何要在不改变左/右填充的情况下做到这一点？我希望（也许只是懒惰）是避免每次开始嵌套行时调整所有填充。我相信在 Bootstrap v2 中实际上可以做到这一点，但他们改变了它？
我真的不知道，我从没用过 v2。对我来说，调整填充没什么大不了的。我用 bootstrap 取得了很好的效果，直到现在我都用它做了我想做的一切。这就是我能说的，如果你觉得这个答案有帮助的话......

【解决方案3】：

我猜，这是因为你在<div class="container"> 中完成了这整件事，所以网格按照这个块进行。只需删除<div class="container">，内部块将捕捉到“主”网格。玩一点类和偏移量，它看起来像第一张图片。

【讨论】：

我尝试删除容器，但正如我所怀疑的那样，嵌套列从嵌套行而不是祖父行中获取位置

【解决方案4】：

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

Bootstrap 3 nested grid not reset to 12

Prevent bootstrap 3 from resetting nested grids / use master grid

【讨论】：

有趣的是，第一篇文章实际上是我发的！ :) 我在开始使用 Bootstrap 之前写了这篇文章，因为我期待我会遇到这个问题——这正是我所处的位置。您的脚本看起来可以解决问题 - 您是否在较大的页面或移动设备上对其进行了测试，以查看它是否会对设备产生很大影响以重新计算所有内容？
我没有对它进行很多测试，仅在我目前的专业演出 (labsynapse.com) 和台式机上进行了测试，这是我们的重点——从来没有出现过问题；不过，我应该，它是一个有用的工具。关于时间，我还必须对其进行基准测试，是的，但它是每个请求运行一次（当文档准备好时）类型的脚本——我还可以说，由于算法的性质（DFS），它是 O( n) DOM 中的元素数量。很抱歉这个错误的答案 - 如果我进行更多测试和基准测试，我可以回复你。哦，感谢您在回答中提到的可爱。