html - 在 IE 中使用 CSS column-width 时自定义 Bootstrap 复选框呈现错误

Question

我使用 Bootstrap(版本 4)的自定义复选框。如果我在它们的父容器中使用 column-width 对齐它们，最后一列中的复选框不会出现在 IE 11 中。在 Chrome 和 FF 中是可以的。

标签文本可见，但包含实际自定义复选框的伪元素不可见。对于此渲染错误，您有任何解决方法吗？

.container {
  column-width: 100px;
}

<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="custom-checkbox custom-control">
      <input type="checkbox" class="custom-control-input" id="check1"/>
      <label class="custom-control-label" for="check1">test1</label>
    </div>
    <div class="custom-checkbox custom-control">
      <input type="checkbox" class="custom-control-input" id="check2"/>
      <label class="custom-control-label" for="check2">test2</label>
    </div>
    <div class="custom-checkbox custom-control">
      <input type="checkbox" class="custom-control-input" id="check3"/>
      <label class="custom-control-label" for="check3">test3</label>
    </div>
    <div class="custom-checkbox custom-control">
      <input type="checkbox" class="custom-control-input" id="check4"/>
      <label class="custom-control-label" for="check4">test4</label>
    </div>
    <div class="custom-checkbox custom-control">
      <input type="checkbox" class="custom-control-input" id="check5"/>
      <label class="custom-control-label" for="check5">test5</label>
    </div>
    <div class="custom-checkbox custom-control">
      <input type="checkbox" class="custom-control-input" id="check6"/>
      <label class="custom-control-label" for="check6">test6</label>
    </div>
</div>

您可以在此处查看 JSBin 演示:https://jsbin.com/micodetolo/1/edit?html,css,output

Answer 1

_reboot.scss 中的标签 css 类有 display : inline-block 导致此问题。