如何让Bootstrap 4列在768px级小屏幕上保持并排显示？

嘿，这个需求很典型，Bootstrap 4的栅格系统是移动优先的，这意味着你写的col-md-6只会在屏幕宽度≥768px（md断点）时让两列并排，一旦屏幕小于这个宽度，就会自动堆叠成垂直布局。要实现768px及以下仍保持并排，我们可以根据具体需求调整栅格类：

方案1：所有小屏幕（包括手机）都保持并排 #

如果你希望从最小的手机屏幕（<576px）到平板小屏（576px-767px）都保持两列并排，直接把col-md-6替换成col-6就行。col-*是针对xs断点（最小的屏幕尺寸）的类，移动优先的特性会让它在所有更大的屏幕上也生效，所以大屏的布局不会受影响，同时小屏幕也能保持并排。

修改后的代码：

<div class="row">
  <div class="col-6">
    <p>This is just a test</p>
  </div>
  <div class="col-6">
    <p>This is just a test</p>
  </div>
</div>

方案2：仅平板小屏（576px-767px）并排，手机端堆叠 #

如果你的需求是在576px到767px之间保持并排，而更小的手机屏幕（<576px）允许堆叠，那就把col-md-6换成col-sm-6。col-sm-6会在屏幕宽度≥576px（sm断点）时触发并排布局，刚好覆盖你需要的768px及以下的平板区间。

修改后的代码：

<div class="row">
  <div class="col-sm-6">
    <p>This is just a test</p>
  </div>
  <div class="col-sm-6">
    <p>This is just a test</p>
  </div>
</div>

简单来说，Bootstrap的栅格类是从小到大生效的，只要选择比md更小的断点类，就能让小屏幕也实现并排效果啦~

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