带有ul和列的bootstrap 4 css在Safari上不起作用答案

【问题标题】：bootstrap 4 css with ul and columns not working on safari带有ul和列的bootstrap 4 css在Safari上不起作用
【发布时间】：2020-05-11 19:20:54
【问题描述】：

我有大量复选框，我希望根据容器的宽度将它们排列成 2 到 6 列。制作了<ul>，它在 Chrome 和 Firefox 上完美运行。不在 Safari 上。

有一个jsfiddle here

CSS：

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

来自 bootstrap 4 卡的 HTML sn-p：

        <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 上的运行结果。

【问题讨论】：

标签： bootstrap-4 safari

【解决方案1】：

我想我找到了解决办法。添加这个：

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

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

【讨论】：