带有ul的bootstrap 4 css，并且列在safari中不起作用

Question

我有大量的复选框，希望根据容器的宽度分为2至6列。制作了一个<ul>，它可以完美地在Chrome和Firefox上运行。不在Safari上。

有jsfiddle here

CSS：

.configCheckboxes {
    column-count: 6;
    column-width: 7em;
}

引导4卡中的HTML代码段：
        <div class="card collapsed-card">
          <div class="card-body">
            <ul class="configCheckboxes">
                <li><label class="form-check-label"><input class="form-check-input" type="checkbox">A Label</label></li>
                <li><label class="form-check-label"><input class="form-check-input" type="checkbox">Another Label</label></li>
                <li><label class="form-check-label"><input class="form-check-input" type="checkbox">Short</label></li>
                <li><label class="form-check-label"><input class="form-check-input" type="checkbox">Medium</label></li>
                <li><label class="form-check-label"><input class="form-check-input" type="checkbox">A Bit Longer</label></li>
                <li><label class="form-check-label"><input class="form-check-input" type="checkbox">Days</label></li>
                <li><label class="form-check-label"><input class="form-check-input" type="checkbox">Month</label></li>
                <li><label class="form-check-label"><input class="form-check-input" type="checkbox">Year</label></li>
                <li><label class="form-check-label"><input class="form-check-input" type="checkbox">Taxes</label></li>
                <li><label class="form-check-label"><input class="form-check-input" type="checkbox">Cats</label></li>
                <li><label class="form-check-label"><input class="form-check-input" type="checkbox">Dogs</label></li>
                <li><label class="form-check-label"><input class="form-check-input" type="checkbox">Horse</label></li>
                <li><label class="form-check-label"><input class="form-check-input" type="checkbox">Iguana</label></li>
                <li><label class="form-check-label"><input class="form-check-input" type="checkbox">Ducks</label></li>
                <li><label class="form-check-label"><input class="form-check-input" type="checkbox">Pig</label></li>
                <li><label class="form-check-label"><input class="form-check-input" type="checkbox">Elephant</label></li>
                <li><label class="form-check-label"><input class="form-check-input" type="checkbox">Tiger</label></li>
            </ul>
          </div>
        </div>

[在Safari上，我在第一列中得到了复选框，但随后它在复选框的第一列下方显示了更多的复选框行，而其他列的<li>点处应该有一个复选框。请参阅fiddle，并比较Safari和Chrome或Firefox上的“运行”结果。

Answer 1

认为我找到了解决方法。添加此：

.form-check-input{
  position: static;
  margin-right: 0.3rem;
}

现在，它可以像其他浏览器一样在Safari上运行。希望这对某人有帮助。