html - 如何使 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

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

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

container-fluid 类只是一个流体容器，作为 Bootstrap 中普通容器类的补充。我已经用过很多次了，应该可以用!尝试上面的代码进行检查。

编辑

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