如何在Bootstrap的rounded d-flex中使用max-width并解决登录页头部div无法全屏宽度的问题

我帮你分析下为啥这个w-100没生效，以及对应的解决办法：

首先，Bootstrap的w-100本质是设置width: 100%，但这个百分比是相对于父元素宽度的，而且浏览器默认给body加了8px左右的margin，这两个点很可能是问题所在。

给你几个可行的解决方案，按优先级排序：

1. 先去掉body的默认margin #

浏览器默认会给body设置margin: 8px，这会导致最外层的div即使加了w-100，也会被挤得左右留空。你只需要给body加上Bootstrap的m-0类，就能清除默认margin：

<body class="m-0">
  <div style="background-color:#193D4C;" class="w-100"> 
    <h3 class="text-light">Sign In</h3> 
  </div>
</body>

2. 检查父容器的宽度限制 #

如果你的这个div是放在.container里面的，那.container自带左右padding，而且宽度是固定的（不同断点有不同最大值），这时候w-100只能铺满.container的宽度，没法全屏。

解决办法是把父容器换成.container-fluid（它是全屏宽度，没有固定max-width），同时可以加p-0去掉它的默认padding：

<div class="container-fluid p-0">
  <div style="background-color:#193D4C;" class="w-100"> 
    <h3 class="text-light">Sign In</h3> 
  </div>
</div>

3. 强制突破父容器限制（慎用） #

如果不想修改父容器的结构，可以给这个div添加绝对定位，让它直接基于视口宽度铺满：

<div style="background-color:#193D4C; position: absolute; left: 0; right: 0;" class="w-100"> 
  <h3 class="text-light">Sign In</h3> 
</div>

⚠️ 注意：这种方法可能会影响其他元素的布局，比如后面的内容可能会被这个div覆盖，需要配合padding-top或者调整其他元素的位置。

总结一下：最常见的原因就是body的默认margin或者父容器的宽度限制，先从这两个方向排查就能解决问题啦。

内容的提问来源于stack exchange，提问作者Cheknov