Bootstrap 3首列文本过长时将第二列下移至新行的实现方法

问题描述 #

我正在使用Bootstrap 3，当前布局为一行两列。当首列文本内容超过一行时，希望将第二列推送至下一行。以下是我的代码，当首列的Lorem Ipsum文本较短时，输出符合预期：

<div class="col-sm-12">
  <div class="panel panel-default">
    <header class="panel-heading">
      <i class="fa fa-folder-o text-success fa-fw"></i> Basic Info <span class="text-success pull-right">
        <b></b>In Use </span>
    </header>
    <div class="panel-body">
      <div class="row">
        <div class="col-sm-12">
          <div class="col-sm-6 col-xs-12">
            <div class="row m-t-8 m-b-8">
              <div class="col-sm-6 col-xs-12"> Agenci </div>
              <div class="col-sm-6 col-xs-12">
                <span class="text-primary">What is Lorem Ipsum</span>
              </div>
            </div>
          </div>
          <div class="col-sm-6 col-xs-12">
            <div class="row m-t-8 m-b-8">
              <div class="col-sm-6 col-xs-12"> Department </div>
              <div class="col-sm-6 col-xs-12">
                <span class="text-primary"> Retail Audit </span>
              </div>
            </div>
          </div>
          <div class="col-sm-6 col-xs-12">
            <div class="row m-t-8 m-b-8">
              <div class="col-sm-6 col-xs-12"> PTJ Paid </div>
              <div class="col-sm-6 col-xs-12">
                <span class="text-primary">10000001</span>
              </div>
            </div>
          </div>
          <div class="col-sm-6 col-xs-12">
            <div class="row m-t-8 m-b-8">
              <div class="col-sm-6 col-xs-12"> PTJ Responsible </div>
              <div class="col-sm-6 col-xs-12">
                <span class="text-primary">348812</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

但当Lorem Ipsum文本超过一行时，首列文本会换行，第二列仍停留在右侧，这并非我想要的效果。我需要首列文本占据整行，第二列（Department）自动下移至新行。

解决方案 #

方案1：响应式清除浮动（强制成对换行） #

如果希望每两个条目固定成对换行，可在每两个col-sm-6后添加Bootstrap原生的响应式clearfix类，仅在sm及以上屏幕生效：

<div class="col-sm-12">
  <div class="panel panel-default">
    <header class="panel-heading">
      <i class="fa fa-folder-o text-success fa-fw"></i> Basic Info <span class="text-success pull-right">
        <b></b>In Use </span>
    </header>
    <div class="panel-body">
      <div class="row">
        <div class="col-sm-12">
          <div class="col-sm-6 col-xs-12">
            <div class="row m-t-8 m-b-8">
              <div class="col-sm-6 col-xs-12"> Agenci </div>
              <div class="col-sm-6 col-xs-12">
                <span class="text-primary">What is Lorem Ipsum...</span>
              </div>
            </div>
          </div>
          <div class="col-sm-6 col-xs-12">
            <div class="row m-t-8 m-b-8">
              <div class="col-sm-6 col-xs-12"> Department </div>
              <div class="col-sm-6 col-xs-12">
                <span class="text-primary"> Retail Audit </span>
              </div>
            </div>
          </div>
          <!-- 响应式清除浮动，仅在sm及以上屏幕生效 -->
          <div class="clearfix visible-sm-block"></div>
          
          <div class="col-sm-6 col-xs-12">
            <div class="row m-t-8 m-b-8">
              <div class="col-sm-6 col-xs-12"> PTJ Paid </div>
              <div class="col-sm-6 col-xs-12">
                <span class="text-primary">10000001</span>
              </div>
            </div>
          </div>
          <div class="col-sm-6 col-xs-12">
            <div class="row m-t-8 m-b-8">
              <div class="col-sm-6 col-xs-12"> PTJ Responsible </div>
              <div class="col-sm-6 col-xs-12">
                <span class="text-primary">348812</span>
              </div>
            </div>
          </div>
          <div class="clearfix visible-sm-block"></div>
        </div>
      </div>
    </div>
  </div>
</div>

方案2：Flex布局实现自适应换行（内容过长自动占整行） #

Bootstrap 3默认使用浮动布局，无法自动根据内容长度调整列宽。通过自定义Flex布局，可实现内容超过半行宽度时自动占整行：

第一步：添加自定义CSS

.flex-wrap-container {
  display: flex;
  flex-wrap: wrap;
}
.flex-item {
  flex: 0 0 50%;
  box-sizing: border-box;
}
/* 内容过长时强制占整行（兼容现代浏览器） */
@media (min-width: 768px) {
  .flex-item:has(> .row > .col-sm-6 > span.text-primary) {
    flex: 1 0 100%;
  }
}
/* 兼容不支持:has选择器的浏览器，可搭配JS判断 */
.full-width {
  flex: 1 0 100% !important;
}

第二步：修改HTML结构

<div class="col-sm-12">
  <div class="panel panel-default">
    <header class="panel-heading">
      <i class="fa fa-folder-o text-success fa-fw"></i> Basic Info <span class="text-success pull-right">
        <b></b>In Use </span>
    </header>
    <div class="panel-body">
      <div class="row">
        <!-- 替换为Flex容器 -->
        <div class="col-sm-12 flex-wrap-container">
          <div class="flex-item col-xs-12">
            <div class="row m-t-8 m-b-8">
              <div class="col-sm-6 col-xs-12"> Agenci </div>
              <div class="col-sm-6 col-xs-12">
                <span class="text-primary">What is Lorem Ipsum...</span>
              </div>
            </div>
          </div>
          <div class="flex-item col-xs-12">
            <div class="row m-t-8 m-b-8">
              <div class="col-sm-6 col-xs-12"> Department </div>
              <div class="col-sm-6 col-xs-12">
                <span class="text-primary"> Retail Audit </span>
              </div>
            </div>
          </div>
          <div class="flex-item col-xs-12">
            <div class="row m-t-8 m-b-8">
              <div class="col-sm-6 col-xs-12"> PTJ Paid </div>
              <div class="col-sm-6 col-xs-12">
                <span class="text-primary">10000001</span>
              </div>
            </div>
          </div>
          <div class="flex-item col-xs-12">
            <div class="row m-t-8 m-b-8">
              <div class="col-sm-6 col-xs-12"> PTJ Responsible </div>
              <div class="col-sm-6 col-xs-12">
                <span class="text-primary">348812</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

可选：JS兼容处理

如果浏览器不支持:has选择器，可通过JS判断文本宽度并动态添加类：

document.querySelectorAll('.flex-item .text-primary').forEach(el => {
  const parentCol = el.closest('.col-sm-6');
  if (el.offsetWidth > parentCol.offsetWidth * 0.9) {
    el.closest('.flex-item').classList.add('full-width');
  }
});

方案3：简化布局，每个条目单独占行 #

若不需要两个条目并排的效果，直接将每个条目放在独立的row中，确保每个条目占据整行：

<div class="col-sm-12">
  <div class="panel panel-default">
    <header class="panel-heading">
      <i class="fa fa-folder-o text-success fa-fw"></i> Basic Info <span class="text-success pull-right">
        <b></b>In Use </span>
    </header>
    <div class="panel-body">
      <div class="row m-t-8 m-b-8">
        <div class="col-sm-6 col-xs-12"> Agenci </div>
        <div class="col-sm-6 col-xs-12">
          <span class="text-primary">What is Lorem Ipsum...</span>
        </div>
      </div>
      <div class="row m-t-8 m-b-8">
        <div class="col-sm-6 col-xs-12"> Department </div>
        <div class="col-sm-6 col-xs-12">
          <span class="text-primary"> Retail Audit </span>
        </div>
      </div>
      <div class="row m-t-8 m-b-8">
        <div class="col-sm-6 col-xs-12"> PTJ Paid </div>
        <div class="col-sm-6 col-xs-12">
          <span class="text-primary">10000001</span>
        </div>
      </div>
      <div class="row m-t-8 m-b-8">
        <div class="col-sm-6 col-xs-12"> PTJ Responsible </div>
        <div class="col-sm-6 col-xs-12">
          <span class="text-primary">348812</span>
        </div>
      </div>
    </div>
  </div>
</div>

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