Question

我很难调试这个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中发生的情况是，在1200px视口中的.container.contenedor计算边际权利为-15px，而margin-left计算为0px，尽管bootstrap将这两个属性设置为auto。在视口中，就像在我的情况下，1298px，两个边距都计算为49px。

据我所知，当设置为自动时，margin-left / right同时是一种常用的技术，因为两侧的剩余空间被平分。

所以，我的问题是，这个行为是一个chrome的错误？我错过了这个属性的东西吗？可以解释一下。此外，如果我删除.contenedor（有填充：0）问题消失，左右边距是正确计算的，但我仍然不明白。

感谢。

PD，我不是要修复布局或css，我只想了解为什么会这样。

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

Answer 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>

Answer 2

Bootstrap .row类占用右边距和左边距-15px，你需要在样式表中将其定义为零，其次请使用行div内部的.col类而不是行外的网格结构。如果你有问题，div设置宽度为90％并给出一个余量：0 auto;我尝试过相同版本的chrome，它在windows os上运行良好。这里js小提琴

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

http://jsfiddle.net/xnwnprf2/

为什么保证金：自动计算不同的铬？

2 个答案: