Bootstrap 4在Internet Explorer中列无法自动换行问题

我之前也踩过Bootstrap 4在IE里的这个flexbox兼容坑，尤其是嵌套row-col布局的时候，Chrome里小屏幕适配好好的，到IE里直接就截断不换行，确实挺闹心的。

先把遇到问题的代码贴出来方便参考：

<div class="container root">
  <div class="row">
    <div class="col">
      <div class="row no-gutters">
        <div class="col-auto logo">
          <img src="https://www.gravatar.com/avatar?d=mm&s=60" alt="">
        </div>
        <div class="col title">
          Extralongword supermegagiga
        </div>
      </div>
    </div>
    <div class="col">
      <div class="row no-gutters">
        <div class="col">
          <select class="form-control-sm" name="" id="">
            <option value="">Please choose...</option>
          </select>
          <button class="btn btn-sm btn-primary">+</button>
        </div>
        <div class="col">
          <select class="form-control-sm" name="" id="">
            <option value="">Please choose...</option>
          </select>
          <button class="btn btn-sm btn-primary">+</button>
        </div>
      </div>
    </div>
  </div>
</div>

问题根源 #

本质上是IE对flex布局的min-width处理逻辑和现代浏览器不一致：Bootstrap的.row默认是flex容器，但IE里flex子元素不会自动收缩来适配父容器，当子元素包含长文本、表单这类元素时，很容易撑破容器导致截断，而Bootstrap的默认样式在这种嵌套场景下没覆盖到IE的这个特性。

几个可行的解决方案 #

• IE专属flex修复样式
  写一个仅针对IE的CSS规则，强制flex容器换行，同时允许子元素收缩，再给长文本加上断行处理：

  /* 仅针对IE浏览器生效 */
  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .row.ie-flex-fix {
      flex-wrap: wrap;
    }
    .row.ie-flex-fix > .col {
      flex-shrink: 1;
      min-width: 1px;
    }
    .title {
      word-break: break-word; /* 让超长文本强制换行 */
    }
  }
  

  然后给代码里的两个嵌套.row加上ie-flex-fix类，比如：<div class="row no-gutters ie-flex-fix">

• 优化表单列的布局
  对于包含select和按钮的列，让它变成flex容器并允许换行，避免表单元素挤在一起撑爆容器：

  .row.no-gutters > .col {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem; /* 给表单元素加一点间距，布局更美观 */
  }
  

• 用响应式类强制换行
  如果你不想写额外CSS，可以直接给外层的两个.col加上Bootstrap的响应式类，比如.col-md-6，这样在中等屏幕（768px）以下，两列就会自动堆叠换行：

  <div class="col-md-6">
    <!-- 原内容不变 -->
  </div>
  

这些方法里，优先推荐IE专属修复，因为它只针对IE生效，不会影响Chrome等现代浏览器的正常布局表现。

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