Bootstrap 4 带ul的bootstrap 4 css和不适用于safari的列

我有一个很大的复选框列表，我想根据容器的宽度将其排列成2到6列。制作了一个

，它在Chrome和Firefox上运行得非常完美。不是在旅行中

有一个

CSS:

来自bootstrap 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上，我在第一列中看到了复选框，但是在第一列复选框的下面会显示更多的复选框行，而其他列则在应该有复选框的地方有一个点。查看并比较Safari与Chrome或Firefox上的运行结果。

我想我找到了修复方法。添加以下内容：

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

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

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