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应该涵盖这个跨浏览器的问题。

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

Bootstrap 4 Internet Explorer缺少列包装

1 个答案: