bootstrap 4 css с ul и столбцами, не работающими в сафари - PullRequest
Новая
       12

bootstrap 4 css с ul и столбцами, не работающими в сафари

0 голосов
/ 26 января 2020

У меня большой список флажков, которые я хочу разместить в 2-6 столбцах в зависимости от ширины контейнера. Сделал <ul> и он отлично работает на Chrome и Firefox. Не в сафари.

Здесь есть jsfiddle

CSS: 

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

HTML фрагмент с bootstrap 4 карты: 

        <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 я получаю флажки в 1-м столбце, но затем он отображает еще несколько строк флажков ниже 1-го столбца флажков, а другие столбцы имеют точку <li>, где должен быть флажок , См. fiddle и сравните результаты запуска в Safari с Chrome или Firefox.

1 Ответ

0 голосов
/ 28 января 2020

Думаю, я нашел исправление. Добавьте это: 

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

Теперь он работает в Safari, как и в других браузерах. Надеюсь, это кому-нибудь поможет.

...