为什么margin：auto在chrome上的计算方式不同？答案

【问题标题】：Why margin:auto is calculated different on chrome?为什么margin：auto在chrome上的计算方式不同？
【发布时间】：2015-01-23 14:24:04
【问题描述】：

我很难调试这个jsbin。

给定以下布局：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JS Bin</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
</head>
<body>
    <div class="col-xs-12">
        <div class="container contenedor">
            <div class="row">
                    <div class="col-xs-12 col-md-8">
                        <div class="filler green">Green</div>
                    </div>
                    <div class="col-xs-12 col-md-4">
                        <div class="filler orange">Orange</div>
                    </div>
            </div>
        </div>
    </div>
    <div class="height"></div>
</body>
</html>

以及以下 CSS：

.filler {
    width: 100%;
    height: 5em;
    text-align: center;
}
.filler.green {
    border: 1px dashed green;
    background-color: green;
}

.filler.orange {
    border: 1px dashed orange;
    background-color: orange;
}

.height {
    height: 100em;
}

.contenedor {
    padding: 0;
}

在 chrome 中发生 .container.contenedor 在 1200px 的视口中，margin-right 被计算为 -15px，margin-left 被计算为 0px，尽管 bootstrap 将这两个属性设置为 auto。在我的情况下，在 1298 像素的视口中，两个边距都计算为 49 像素。

据我所知，margin-left/right 同时设置为 auto 是一种使元素居中的常用技术，因为两侧的剩余空间被平均分割。

所以，我的问题是，这种行为是 chrome 的错误吗？我错过了这个属性的东西吗？有什么可以解释的。另外，如果我删除了 .contenedor（即有 padding:0），问题就会消失，并且左右边距计算正确，但我仍然不明白。

谢谢。

PD，我不是要修复布局或 css，我只是想了解为什么会发生这种情况。

更新：我忘了提，我的 chrome 版本是 Ubuntu 14.04 上的版本 39.0.2171.99（64 位）

【问题讨论】：

标签： css google-chrome

【解决方案1】：

正如 Bootstrap 的文档所说 (http://getbootstrap.com/css/#grid)，行必须放在容器内，列必须放在一行内。

您将所有内容都放在一个列中。我已经排除了第一个 col-xs-12，它在这里工作（Chrome/Firefox 和 Ubuntu 14.04 也是）。

<div class="container contenedor">
  <div class="row">
      <div class="col-xs-12 col-md-8">
        <div class="filler green">Green</div>
      </div>
      <div class="col-xs-12 col-md-4">
        <div class="filler orange">Orange</div>
      </div>
  </div>
</div>

【讨论】：

您好，estevan，感谢您尽快回复。我知道引导问题，但正如我所问。我不是要修复布局，我的意思是说它的位置很糟糕......我更关心边距正在计算的不同值，因为即使使用该类 col-xs-12 包装我无法理解为什么margin-left 和margin-right 都被分配给auto 时计算不同的容器。

【解决方案2】：

Bootstrap .row 类需要一个-15px 的margin-right 和一个margin-left ，您需要在样式表中将其定义为零，其次请使用行 div 本身而不是行外的 .col 类网格结构。而且，如果您对 div 有问题，请将宽度设置为 90% 并给出 margin:0 auto;我尝试过使用相同版本的 chrome，它在 Windows 操作系统上运行良好。这里是 js 小提琴

.container {width:90%; margin:0 auto;}

http://jsfiddle.net/xnwnprf2/

【讨论】：

嗨@sydonia，是的，我完全了解网格系统，并且第一个 .col-xs-12 不是使用引导程序的正确方法。但正如我所提到的，我的目标不是解决这个问题（我的意思是，最终我会的，这不是我做过的事情，我正在尝试解决）它困扰我的是，chrome 正在计算剩余边距和margin-right 不同，尽管两者都分配给 auto 并且在我提到的情况下它正在做......从 1200px 到 1216px，但从 1217px 开始计算相同......最后 lg 断点 >= 1200px