Bootstrap 4 Internet Explorer 缺少列换行

Question

根据标题，我使用的是 Bootstrap 4，即使在简单的行列配置上，我也可以重现 Internet Explorer 的问题：列换行不适用。

虽然在带有小屏幕的 chrome 中，所有元素都很好地适合视口，但在资源管理器中，它们会被修剪而不是像预期的那样包裹。

<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>

检查这个 Codepen 的问题很明显： https://codepen.io/stilllife00/pen/VyOMBX

这可能是带有 flexbox 的 Explorer 的错误行为，但我认为 bootstrap 应该涵盖这个跨浏览器问题。

Answer 1

您可以尝试将col 更改为col-sm ：

<div class="container root">
  <div class="row">
    <div class="col-sm"> <-- HERE 2nd Update
      <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-sm">
            <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-sm">
            <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>

小提琴：https://codepen.io/anon/pen/dJEjpg