Question

我在所有页面上都有封面..我正在使用jumbotron来获得全宽图像。但它在左右两侧留下了空间。我添加了margin-left所以左侧的空白区域已经消失，但右边的空白区域仍然存在。此外，当我调整浏览器大小时，右侧有一个非常大的空间。

<div id="cover-success" class="jumbotron">
   <div class="container">
        <div class="overlay">
            <div class="text-center">
                <h1>Success Stories</h1>
                <h2>Here are some of the many resolved complaints.</h2>
            </div>
        </div>
    </div>
</div>

使用的CSS：

#cover-success.jumbotron {
background-size: cover;
background-image: url('Images/cover-success-stories.jpg');
 position:absolute;
width:100%;
margin-top: -14px;
margin-left: -70px;
margin-right:-50px;
height: 270px;
}

Answer 1

尝试填充

 #cover-success.jumbotron {
 background-size: cover;
 background-image: url('Images/cover-success-stories.jpg');
 position:absolute;
 width:100%;
 margin: 0px;
 padding: 0px;
 height: 270px;
 }

bootstrap jumbotron全宽图像

1 个答案: