css – 容器引导程序内的全宽背景颜色

我有这个标记：

而我想将“内容”div应用于全宽背景色.

我怎么能通过CSS做到这一点？

这是一个jsbin,向您展示我正在尝试做的事情.

最佳答案

您可以使用.jumbotron类来实现此目的.请确保不要将其放在带有.container类的元素中.

Jumbotron

所以这是一个使用.jumbotron的例子.

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css');

body {
  margin: 0;
}

.content {
  background-color: green;
}

.jumbotron {
  background-color: orange;
}

.no-left-right-padding {
  padding-left: 0;
  padding-right: 0;
}

@media screen and (min-width: 1200px) {
  img {
    width: 100%;
    height: auto;
  }

}