Bootstrap 4 Internet Explorer 缺少列换行

Question

根据标题，我正在使用 Bootstrap 4，即使在简单的 row-col 配置上我也可以重现 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

这可能是 Explorer 与 flexbox 的不当行为，但我认为 bootstrap 应该涵盖这个 cross-browser 问题。

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>

Fiddle: https://codepen.io/anon/pen/dJEjpg

Bootstrap 4 Internet Explorer 缺少列换行

Bootstrap 4 Internet Explorer missing column wrapping

twitter-bootstrap

internet-explorer

bootstrap-4

twitter-bootstrap-4