基于Bootstrap的单容器两栏布局响应式优化方案咨询

嘿，这个问题我之前做项目的时候也碰到过！直接加固定内边距确实会在移动端翻车，毕竟Bootstrap的核心就是响应式嘛，给你几个更靠谱的方案：

方案1：用Bootstrap内置的响应式间距类 #

Bootstrap 4本身就提供了一套响应式间距工具类，完全不用自己写额外CSS，就能实现不同屏幕尺寸下的内边距适配。比如px-md-5表示在中等屏幕（md及以上）左右内边距为5个单位，px-2则是移动端左右内边距为2个单位，优先级是小屏幕类在后，会覆盖大屏幕的设置（当屏幕缩小到md以下时）。

修改后的代码示例：

<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">
      <!-- 这里用响应式间距类替代固定padding -->
      <div class="col-md-6 bg-primary text-white px-md-5 px-2 py-4">
        左侧栏内容
      </div>
      <div class="col-md-6 bg-light px-md-5 px-2 py-4">
        右侧栏内容
      </div>
    </div>
  </div>
</section>

这类间距类的命名规则是{方向}{断点}-{大小}，方向包括p（上下左右）、px（左右）、py（上下），断点对应Bootstrap的sm/md/lg/xl，大小从0到5，完全满足大部分场景。

方案2：列内嵌套容器（更规整的布局） #

如果你的内容需要更严格的宽度限制（比如不想在超大屏幕上拉得太宽），可以在每个col里面嵌套一个container或者container-fluid，利用容器本身的内边距和响应式特性：

<section>
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-6 bg-primary text-white">
        <!-- 嵌套container，自带响应式内边距 -->
        <div class="container py-4">
          左侧栏内容
        </div>
      </div>
      <div class="col-md-6 bg-light">
        <div class="container py-4">
          右侧栏内容
        </div>
      </div>
    </div>
  </div>
</section>

这种方式的好处是，内容区域的宽度会跟着container的响应式规则走，不会在超大屏幕上无限拉伸，同时内边距也是适配的。

方案3：自定义响应式CSS（灵活度最高） #

如果内置工具类满足不了你的需求，比如需要自定义内边距数值，可以用Bootstrap的断点写自定义CSS：

/* 移动端默认内边距 */
.custom-col {
  padding: 1rem;
}
/* 中等屏幕及以上的内边距 */
@media (min-width: 768px) {
  .custom-col {
    padding: 2.5rem;
  }
}

然后在HTML里给列加上这个类：

<div class="col-md-6 bg-primary text-white custom-col">
  左侧栏内容
</div>

为什么原来的方案有问题？ #

直接给列加固定padding（比如padding: 2rem;）会在所有屏幕尺寸下生效，移动端屏幕本来就小，过大的内边距会导致内容挤压甚至换行错乱，而上面的方案都是基于Bootstrap的响应式断点，只在对应屏幕尺寸下应用合适的内边距，完美适配移动端。

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