Bootstrap Container边距及背景色不继承问题解决方案咨询

原因分析 #

1. 额外边距：Bootstrap 4的container类默认自带左右内边距（padding-left、padding-right），且在不同屏幕断点下有固定最大宽度，这会导致容器两侧出现空白边距。
2. 背景色不继承：container默认未设置背景色，若显示白色，大概率是自定义样式给container添加了background-color: white，或是父元素（如body）的背景色未正确传递。

解决方案 #

1. 消除额外边距 #

根据需求选择方案：

• 方案一：全屏宽度容器
  若需要容器撑满屏幕宽度，直接将外层container替换为container-fluid，它会自动占满100%宽度并保留响应式适配：

  <!-- 替换前 -->
  <div class="container">
  <!-- 替换后 -->
  <div class="container-fluid">
  

• 方案二：保留居中但去除内边距
  若要保留container的居中特性，仅去除左右内边距，添加自定义CSS：

  .container {
    padding-left: 0;
    padding-right: 0;
  }
  

  注意：此时内部row的默认负边距会导致内容溢出，需给row添加no-gutters类消除负边距：

  <div class="row no-gutters">
  

2. 修复背景色继承问题 #

添加自定义CSS重置container的背景色，让它继承父元素背景：

.container {
  background-color: transparent;
}

如果页面背景色设置在body上，修改后container会自动继承body的背景色，不再显示白色。

完整修改后的代码示例 #

<!-- Bootstrap-4 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<!-- 自定义CSS -->
<style>
  .container {
    padding-left: 0;
    padding-right: 0;
    background-color: transparent;
  }
</style>

<!-- Body -->
<div class="container">
  <section class="lndForm">
    <div class="containerform">
      <div class="row no-gutters">
        <div class="col-md-6" id="div2">
          <div class="textCTA">
            <h2 class="title"> Ajudando pessoas comuns a passar na redação ENEM </h2>
            <form action="https://formsubmit.co/rodrigoriosn3@gmail.com" method="POST">
              <input type="hidden" name="_captcha" value="false">
              <input type="hidden" name="_next" value="http://margarethredacoes.com.br/">
              <label for="nome">Nome</label> <br>
              <input type="text" name="NOME" id="" required> <br>
              <label for="email" required>Email</label> <br>
              <input type="email" name="E-MAIL" id="" required> <br>
              <label for="telefone">Telefone</label> <br>
              <input type="text" name="TELEFONE" id="" required>
              <button type="submit" onclick="alerta()">Continuar</button>
            </form>
          </div>
        </div>
        <div class="col-md-6" id="div1">
          <div class="containerimage">
            <img src="/Imagens/professora.png" alt="">
          </div>
        </div>
      </div>
    </div>
  </section>
</div>

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