Bootply

Question

我正在尝试使图像与浏览器屏幕具有相同的宽度。它需要响应。我是bootstrap 3的新手，所以非常感谢任何帮助。

这是一个代码游乐场，让您看到我的意思。

您将看到jumbotron图像左对齐。我需要它来拉伸页面的整个宽度。

Answer 1

根据Bootstrap文档，要使.jumbotron全宽，请将其带到任何.container之外。

Answer 2

使img宽度为100％..

.widewrapper {
  width:100%;
  }

.widewrapper > img {
  width:100%;
}

Answer 3

我遇到了同样的问题。我在html中将我的容器带到了容器之外，并在我的CSS中使用了以下代码：

jumbotron {
position: relative;
background: url("img.url") no-repeat center center;
width:100%;
height: 100%;
background-size: 100% 100%;
}