Bootstrap4如何让超小列类在全小屏响应并保持fa-check行内显示？

问题解答 #

可以实现。Bootstrap4中无断点前缀的列类（如col-1、col-11）本身就默认对所有屏幕尺寸生效，包含超小屏及以上所有断点。

Bootstrap4已经移除了3.x版本里的col-xs-*类，原先的超小屏（<576px）的响应式类直接简化为不带断点前缀的col-*，这类规则会作用于所有屏幕尺寸，不会因为屏幕变小失效。

你当前代码的问题在于：残留了Bootstrap3的col-xs-*写法，且后面几个清单项的列类只加了col-sm-*前缀，这就导致屏幕宽度小于576px时，列会默认占满整行，图标和文本就会分行显示。

修改方案非常简单：把所有清单项里的列类改成col-1和col-11即可，不需要加sm前缀，这样所有尺寸下都是1列放图标、11列放文本，保持行内显示。

修改后的完整代码如下：

<div class="col-lg-6 col-md-8">
  <div class="card bg-success border-0 ">
    <div class="card-body">
      <div class="card-title">
        <h1>30天免费试用</h1>
      </div>
      <div class="card-description">
        <p>参与30天免费试用即可使用我们的全部功能，助力提升员工幸福感、参与度与忠诚度：</p>
      </div>

      <div class="card-checklist">
        <div class="row">
          <div class="col-1">
            <i class="fas fa-check"></i>
          </div>
          <div class="col-11">
            <span style="font-weight: 600">每周自动调研 <span style="color: #fff0ff; font-weight: lighter">– 及时了解员工的情绪状态，判断是否需要提供支持。</span></span>
          </div>
        </div>
        <br>
        <div class="row">
          <div class="col-1">
            <i class="fas fa-check"></i>
          </div>
          <div class="col-11">
            <span style="font-weight: 600">匿名反馈安全通道 <span style="color: #fff0ff; font-weight: lighter">– 用匿名消息功能真实获取员工的核心需求。</span></span>
          </div>
        </div>
        <br>
        <div class="row">
          <div class="col-1">
            <i class="fas fa-check"></i>
          </div>
          <div class="col-11">
            <span style="font-weight: 600">员工幸福度监测面板 <span style="color: #fff0ff; font-weight: lighter">– 可在同一操作面板查看企业整体健康状态，必要时快速采取调整措施。</span></span>
          </div>
        </div>
        <br><br><br>
      </div>
    </div>
  </div>
</div>

如果需要调整对齐效果，还可以给col-1加d-flex align-items-center类，让图标垂直居中对齐文本，显示效果更美观。

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