如何用CSS与Bootstrap 5让联系页面铺满父Div全部区域？

原始代码 #

<div class="col s1 m-5" style="background-color: white">
    <div id="gd1" style="background-color: aqua;width: 100%;align-items: center;height: 20%;border-radius: 1% 1% 0 0;margin: 0;text-align: center;color: white;;">
      <br>  
      <h4>
        CONTECT US 3
      </h4>
      <i class="fa fa-facebook m-3"></i>
      <i class="fa fa-twitter m-3"></i>
      <i class="fa fa-google m-3"></i>
    </div>
    <input type="text" value="Your Name" name="Phone"  class="inpb"><br>
    <input type="text" name="E-mail" value="Your Mail"  class="inpb"><br><br><br><br><br>
    <textarea name="" id="" class="inpb" cols="20" rows="1" style="border-top: 1px solid;border-bottom: 0px;">Massege</textarea>
    <button id="gd1" class="bt1 m-5 p-1" style="width: 80px;float: right;" > SEND</button>
  </div>

用户问题 #

我使用CSS与Bootstrap 5开发了上述联系我们页面，当前页面无法贴合父div的左右边框，请问该如何调整才能让它铺满父div的100%区域？

解决方法 #

问题核心是最外层div的m-5类，这是Bootstrap的全局外边距类，会给元素上下左右都添加1.25rem的外边距，直接导致它无法贴合父容器的左右边缘。

具体调整步骤：

• 移除左右外边距：把m-5换成my-5（仅给上下添加外边距），如果不需要上下边距直接删掉m-5即可。
• 修正重复ID：代码里有两个元素用了相同的id="gd1"，HTML中ID必须唯一，建议将顶部标题栏的ID改为gd-header之类的唯一标识，避免样式或JS冲突。
• 让内部表单元素铺满容器：给.inpb类添加width: 100%; box-sizing: border-box;样式，确保输入框、文本域的边框和padding不会超出容器宽度，完全贴合左右边缘。

修改后的示例代码 #

<div class="col s1 my-5" style="background-color: white">
    <div id="gd-header" style="background-color: aqua;width: 100%;align-items: center;height: 20%;border-radius: 1% 1% 0 0;margin: 0;text-align: center;color: white;">
      <br>  
      <h4>
        CONTECT US 3
      </h4>
      <i class="fa fa-facebook m-3"></i>
      <i class="fa fa-twitter m-3"></i>
      <i class="fa fa-google m-3"></i>
    </div>
    <input type="text" value="Your Name" name="Phone"  class="inpb" style="width: 100%; box-sizing: border-box;"><br>
    <input type="text" name="E-mail" value="Your Mail"  class="inpb" style="width: 100%; box-sizing: border-box;"><br><br><br><br><br>
    <textarea name="" id="" class="inpb" cols="20" rows="1" style="border-top: 1px solid;border-bottom: 0px; width: 100%; box-sizing: border-box;">Massege</textarea>
    <button id="send-btn" class="bt1 m-5 p-1" style="width: 80px;float: right;" > SEND</button>
  </div>

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