我使用 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
最佳答案
关于html - 在 IE 中使用 CSS column-width 时自定义 Bootstrap 复选框呈现错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58592000/