如何使Bootstrap div全宽？ （基于屏幕）

Question

这是我用Bootstrap编写的代码：

 <div class='container-fluid' >
    <div style='background-color:#24242a;height:20vh;margin-top:10%;left:0;margin-left:0%;'>
        <div class="row" style='padding-top:20px;width:100%;' >
            <center><h1 style='font-weight: 400;letter-spacing: 0.05em;color:#E4D5D5;'>CINE SUNTEM <span style='font-weight:bold;'>NOI?</span></h1></center>
          <div class="col-xs-6 col-sm-4 col-lg-4">
            1
          </div>


          <div class="col-xs-6 col-sm-4 col-lg-4">
            2
          </div>


          <div class="col-xs-6 col-sm-4 col-lg-4">
            3
          </div>


        </div>
      </div>
  </div> <!-- END CONTAINER -->

但div只是屏幕宽度的80％并且居中。我怎样才能100％宽度？我将感谢所有答案。

Answer 1

类容器 - 流体不应该是全宽度。如果你想要，例如添加一个延伸到窗口宽度100％的背景颜色我建议你在容器流体之外做一个包装div：

<div style="width:100%; height: 600px; background-color: red;">
<div class="container-fluid">...</div>
</div>

container-fluid类只是一个流体容器，是Bootstrap中普通容器类的补充。我已经多次使用它了，它应该工作！请尝试上面的代码进行检查。

修改

OP使用上面的代码来引入一个带有Bootstrap的全宽容器。他还有一个额外的问题，即有一个已经有容器类的父div。请注意这一点，因为父母还可以额外限制引入全宽度窗口div的能力。