使用一个容器

Question

请看下面的屏幕（我正在使用 Bootstrap ）：

添加填充可以解决此问题，但对移动设备无响应。有更好的方法吗？

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<section>
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-6 bg-primary text-white ">
        <h1>header 1</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro laboriosam est obcaecati veniam optio natus officiis tempora eum odit, cum dolores similique inventore neque? Error id eligendi ducimus, natus explicabo.20</p>
      </div>
      <div class="col-md-6 ">
        <h1>Header 1</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro laboriosam est obcaecati veniam optio natus officiis tempora eum odit, cum dolores similique inventore neque? Error id eligendi ducimus, natus explicabo.20</p>
      </div>
    </div>
  </div>
</section>
<section>
  <div class="container">
    <div class="row">
      <div class="col-md-6 bg-primary text-white ">

        <h1>Header 2</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro laboriosam est obcaecati veniam optio natus officiis tempora eum odit, cum dolores similique inventore neque? Error id eligendi ducimus, natus explicabo.20</p>
      </div>
      <div class="col-md-6">
        <h1>Header 2</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro laboriosam est obcaecati veniam optio natus officiis tempora eum odit, cum dolores similique inventore neque? Error id eligendi ducimus, natus ex plicabo.20
        </p>
      </div>
    </div>
  </div>
</section>

Answer 1

检查以下升级的HTML

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<section>
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-3 col-md-offset-3 bg-primary"></div>
      <div class="col-md-3 bg-primary text-white ">

        <h1>header 1</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro laboriosam est obcaecati veniam optio natus officiis tempora eum odit, cum dolores similique inventore neque? Error id eligendi ducimus, natus explicabo.20</p>

      </div>

      <div class="col-md-3">

        <h1>Header 1</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro laboriosam est obcaecati veniam optio natus officiis tempora eum odit, cum dolores similique inventore neque? Error id eligendi ducimus, natus explicabo.20</p>

      </div>
      <div class="col-md-3"></div>
    </div>
  </div>
</section>


<section>
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-3 col-md-offset-3"></div>
      <div class="col-md-3 bg-primary text-white ">

        <h1>Header 2</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro laboriosam est obcaecati veniam optio natus officiis tempora eum odit, cum dolores similique inventore neque? Error id eligendi ducimus, natus explicabo.20</p>

      </div>

      <div class="col-md-3">
        <h1>Header 2</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro laboriosam est obcaecati veniam optio natus officiis tempora eum odit, cum dolores similique inventore neque? Error id eligendi ducimus, natus ex plicabo.20
        </p>
      </div>
      <div class="col-md-3"></div>
    </div>
  </div>
</section>