Question

我有一个问题，即在我的行的右侧有一个持久的空白区域，尽管事实上我似乎已将所有内容设置为全宽样式（0边距，容器流体等））。

我开始从我的网站上剥离元素，以尽可能简单地查看问题所在。我现在只是头部内容，容器流体和一排，但问题仍然存在。

html, body, .container-fluid {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}
.home {
  width: 100%;
  height: 100%;
  background-image: url("../images/background3.jpeg");	
  padding-top: 10%;
  padding-bottom: 10%;
  background-size: cover;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Modern Business - Start Bootstrap Template</title>
    <link href="https://fonts.googleapis.com/css?family=Pathway+Gothic+One" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Open Sans" rel="stylesheet">
  </head>
  <body>
    <div class="container-fluid">
      <div class="row home">
      </div>
    </div>
  </body>
</html>

下面的图片是该网站的样子。您可以非常清楚地看到白色空间（在右侧，非常小，如5px左右）。

Answer 1

行类的默认边距导致此

编辑.home类的css，如下所示：

.home{
  width:100%;
  margin:0;
  padding:0;
}

对于任何元素，将margin:0;padding:0;放在第二个开始编写其CSS的位置总是一个好主意。你总是可以在适合的时候添加边距和填充，但它不会给你带来这样的问题。

Answer 2

将margin:0添加到.home类以覆盖bootstrap默认边距：

https://jsfiddle.net/yc6p7osk/1/

如果你检查.row - 你会发现那里有一些默认的边距。

另外，你可以使用另一个用于100％宽度容器的boostrap类。

Answer 3

html, body, .container-fluid {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
box-sizing: border-box;
}

.home {
width: 100%;
height: 100%;
padding-top: 10%;
padding-bottom: 10%;
background-size: cover;
box-sizing: border-box;
}

当您使用宽度和高度100％时，默认是将边框等添加到宽度。添加box-sizing：border-box;无论如何，你的区块将是100％。

此处有更多信息：http://www.w3schools.com/cssref/css3_pr_box-sizing.asp

HTH。

在引导站点的Div权利的微小的白色空间

3 个答案: