Fatal编程技术网
  • css/
  • Css 为什么保证金：自动计算不同的铬？

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

css google-chrome

Css 为什么保证金：自动计算不同的铬？,css,google-chrome,Css,Google Chrome,我很难调试这个 鉴于以下布局： <!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/bo

我很难调试这个

鉴于以下布局：

<!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>
chrome中的.container.contendor在1200px的视口中，右边距计算为-15px，左边距计算为0px，尽管bootstrap将这两个属性设置为自动。在一个1298px的视口中，两个边距都计算为49px

据我所知，同时，当设置为“自动”时，左边距/右边距是使元素居中的常用技术，因为两边的剩余空间被平均分割

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

谢谢

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

更新：我忘了提到，我的chrome版本是Ubuntu 14.04上的39.0.2171.99版（64位），正如Bootstrap的文档所说（），行必须放在一个容器中，列必须放在一行中

你把所有的东西都放在一列里。我已经排除了第一个col-xs-12，它在这里工作（Chrome/Firefox和ubuntu14.04）


绿色
橙色
Bootstrap.row类的右边距和左边距各为-15px，您需要在样式表中将其定义为零，其次请使用row div本身内部的.col类，而不是row to grid结构外部的.col类。如果div有问题，请将宽度设置为90%，并给出一个边距：0 auto；我尝试过同一版本的chrome，它在windows操作系统上运行良好。这是小提琴

.容器{
宽度：90%；
页边距：0自动；
}

你好，estevan，感谢您尽快回复。我知道引导程序的问题，但正如我所问的。我不是在试图修改布局，我的意思是说这个糟糕的地方。。。我更关心的是，边距计算的不同值，因为即使使用col-xs-12类包装容器，我也无法理解如果将左边距和右边距都分配给auto，为什么计算的不同。hi@sydonia，是的，我完全了解网格系统，首先，col-xs-12不是使用引导的正确方法。但正如我所提到的，我并不是要解决这个问题（我的意思是，最终我会的，这不是我做的，我正在试图解决）它困扰我的是，chrome计算的左边距和右边距是不同的，尽管事实上两者都被分配给auto，而且在我提到的情况下它正在做。。。从1200px到1216px，但从1217px开始计算相同的。。。最后lg断点>=1200px 
.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;
}

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