如何使用 Bootstrap 3 的非整数列宽制作像素完美的网站？答案

【问题标题】：How can I make a pixel-perfect web site with Bootstrap 3's non-integer column widths?如何使用 Bootstrap 3 的非整数列宽制作像素完美的网站？
【发布时间】：2014-07-11 03:47:16
【问题描述】：

我对 Bootstrap 3 的非整数列宽感到困惑。

根据documentation，“小型设备”的容器宽度为750px。这包括 11 个 30 像素的间距（总共 330 像素），剩下 420 像素，除以 12 列，每列 35 像素。好的。

但“中型设备”的容器宽度为 970 像素。再次减去 330px 得到 640px，除以 12 是 53.33px。嗯？这是如何运作的？这是否意味着我得到两列 53px 后跟一列 54px，还是什么？

有谁明白为什么 Twitter 不只是将“中型设备”的列宽设为 54 像素，而将容器宽度设为 978 像素？

【问题讨论】：

尝试阅读这个...它可能对您有更多帮助...tutorialrepublic.com/twitter-bootstrap-tutorial/… - “中型设备”的最大列宽实际上是 81 像素，因为大小设置在一组之间价值。
“有人知道为什么 Twitter”：Bootstrap 实际上不再隶属于 Twitter。
回复：“为什么？”：基本上，人都是人，会犯错误：github.com/twbs/bootstrap/issues/12808#issuecomment-47717422
有趣的线程。我认为数学是错误的。您不能只将容器宽度除以 12 来获得列宽，因为虽然有 12 列，但只有 11 个装订线。您必须减去装订线空间，然后将剩余宽度除以 12。对于 sm，列宽是 (750-330)/12=35，对于 md，列宽是 (970-330)/12=53.33，和 (1170-330 )/12=70 对于 lg.
更友好的尺寸是 sm 为 36，md 为 54，lg 为 72。

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

如果您正在寻找固定宽度的网格，那么 Twitter Bootstrap 可能不适合您。

Bootstrap 网格基于百分比，设计为移动优先的响应式网格。简而言之，它允许您指定网格在特定断点之间的行为方式。

sm 断点位于 768px，因此如果您想定位 768px 或更大的设备，请使用 col-sm-* 类。 * 是表示 1-12 的网格单位的值。因此，col-sm-6 将是所有 768 像素或更大设备上包含行宽的 50%（即 6/12）。它不会为 384 像素。假设该行是屏幕的整个宽度，它将是屏幕宽度的 50%（较少的间距填充）。

【讨论】：

我了解 Bootstrap 网格的工作原理。我不是在寻找或固定宽度的网格。但是，我希望网格列的宽度是整数个像素，例如 50 或 60，而不是 53.33。如果我使用的是流体网格，那么宽度可以是任何值，但是对于常规网格，给定宽度 >= 768，列宽是固定的。

【解决方案2】：

如果您愿意放弃响应能力，可以使用xs 列类。它们保留一个固定的宽度，该宽度是根据您的容器宽度确定的。见：http://getbootstrap.com/css/#grid-options

【讨论】：