如何摆脱背景图像上的边距？

Question

http://codedifferently.com/crest.html是我正在处理的页面。

这是我的CSS文件：

@charset "UTF-8";
/* CSS Document */

/* Move down content because we have a fixed navbar that is 50px tall */
body {
  padding-top: 0px;
  padding-bottom: 0px;
  margin: 0px;
}

div.jumbotron {
    background-image: url('img/chicago2.jpg');
    background-color: #CCC;
    background-size: cover;
    height: 450px;
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    border: none;
    margin-top: 0px;
    padding: 0px;

}

div.navbar navbar-default navbar-static-top" role="navigation {
    border: 0px;
}

/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
  margin-bottom: 0px;
  text-align: center;
}
.marketing h2 {
  font-weight: normal;
}
.marketing .col-lg-4 p {
  margin-right: 0px;
  margin-left: 0px;
}

.featurette-divider {
  margin: 80px 0; /* Space out the Bootstrap <hr> more */
}

/* Thin out the marketing headings */
.featurette-heading {
  font-weight: 300;
  line-height: 1;
  letter-spacing: -1px;
}

/* RESPONSIVE CSS
-------------------------------------------------- */

@media (min-width: 768px) {

  /* Navbar positioning foo */
  .navbar-wrapper {
    margin-top: 0px;
  }
  .navbar-wrapper .container {
    padding-right: 15px;
    padding-left: 15px;
  }
  .navbar-wrapper .navbar {
    padding-right: 0;
    padding-left: 0;
  }

  /* The navbar becomes detached from the top, so we round the corners */
  .navbar-wrapper .navbar {
    border-radius: 4px;
  }

  /* Bump up size of carousel content */
  .carousel-caption p {
    margin-bottom: 20px;
    font-size: 21px;
    line-height: 1.4;
  }

  .featurette-heading {
    font-size: 50px;
  }
}

@media (min-width: 992px) {
  .featurette-heading {
    margin-top: 120px;
  }
}

我在Bootstrap框架上使用Jumbotron预设。

如何摆脱背景图像上的边框，如何在功能区上添加边距/填充以使它们远离边缘？我放了我的jumbotron。我的源代码顶部的CSS文件，但它没有任何影响。是因为bootstrap css文件干扰了吗？

Answer 1

我没有在你的例子上看到边框，但是，我看到一个填充物带有Jumbotron的引导程序，所以如果你的意思是你不能使用的空间边界：Jumbotron使用标准的30px的填充。您可以使用以下内容覆盖它：

.jumbotron {padding: 0px;}

但是，您在该页面上的css与发布方式不同。您在页面上作为Jumbotron类提供的CSS如下所示。

div.jumbotron {
    background-image: url('img/chicago2.jpg');
    background-color: #3FF;
    background-size: cover;
    height: 500px;
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    border: none;
}

所以要么你没有更新你的样式表到那里，或者你在某处犯了错字。

所以我在图片中检查了填充30px，加上媒体查询的填充顶部和底部，它完全正常。此外，因为您已在文本中添加了容器，所以您也受容器大小的限制。提醒一下，如果您认为它不会勾勒到屏幕的左侧。

此外，它还有一些特定尺寸的媒体查询，您可能也需要更改它们。\

- 编辑 -

不想说不顺行btw，但是你的bootstrap.min.js上的内部服务器错误和你的视口工作在IE-10上工作。

最后但并非最不重要。你正在调用jquery文件之前的bootstrap min文件，这是一个禁忌，如果在引导文件之前没有调用jquery，则bootstrap不会运行。删除你头脑中的上部引导程序，否则会导致错误，它会作为第一个错误发生错误，因为你还在页脚下面的yoru脚本中添加了引导程序，你很高兴