容器流体不是完全宽度

Question

请查看我的示例代码

<div class="container-fluid">
    <section class="parallax-bg-1 text-center" style="background-image:url('https://killtheboredomdotcom.files.wordpress.com/2015/08/skyline-of-rome.jpg?w=1920&h=768&crop=1')">
        <h1 class="">Welcome</h1>

        <p class="lead">subtitle</p>
    </section>
</div>

图片处于视差模式，但看看它仍然有填充的截图。

我试图获得与此网站相同的结果：http://remtsoy.com/tf_templates/traveler/demo_v1_7/index.html

JS小提琴：

http://jsfiddle.net/uf9np3kq/

Answer 1

默认样式container-fluid的{​​{1}}为15px。您可以通过应用以下样式覆盖默认行为：

padding left and right

＆＃13;

＆＃13;

.container-fluid{
   padding: 0;
}

＆＃13;

.container-fluid{
    padding: 0 !important;
}
section.parallax-bg-1{
background-size: cover;
}

＆＃13;

＆＃13;

＆＃13;

Answer 2

更改

<div class="container-fluid">
....
</div>

收件人

<div class="container-fullwidth">
....
</div>

Answer 3

您可能想要使用jumbotron的div类。

<div class="jumbotron">
  <div class="container">
    <h1>Welcome</h1>
    <p>Subtitle>
  </div>
</div>

看起来像这样：http://getbootstrap.com/examples/jumbotron/。然后您可以根据需要应用样式。

Answer 4

只需将您的内容包装在div.row：http://jsfiddle.net/uf9np3kq/1/

中

Answer 5

只需更换您的<section>和.container-fluid即可。假设您的部分具有背景图像。请参阅下面的更新小提琴：

Fiddle

电流：

<div class="container-fluid">
  <section>...</section>
</div>

更改为：

<section>
  <div class="container-fluid">...</div>
</section>

注意：这也适用于.container，而不仅仅是.container-fluid