html – 如何使Bootstrap div全宽？ (基于屏幕)

2023年7月31日 405次阅读

这是我用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％宽度？我将感谢所有答案.

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

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

容器流体类只是一个流体容器,作为Bootstrap中普通容器类的补充.我已经多次使用它了,它应该工作！尝试上面的代码来检查它.

编辑

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

点赞