Несбалансированные CSS-столбцы в Chrome
Я хочу, чтобы динамически отображать некоторые группы списка Bootstrap в нескольких столбцах, используяСтолбцы CSS, но у меня возникают странные проблемы с пробелами в Chrome. Firefox работает отлично. Похоже именно проблемаэтот парень имелНо он так и не получил ответа, возможно, потому что он не привел хороший пример. Поэтому я приведу хороший пример.
CSS (загружается после Bootstrap):
.columns {
-webkit-column-width: 200px;
-moz-column-width: 200px;
column-width: 200px;
-webkit-column-gap: 20px;
-moz-column-gap: 20px;
column-gap: 20px;
width: 600px;
}
.list-group {
display: inline-block;
width: 100%;
}
HTML:
<div class="columns">
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
</ul>
<ul class="list-group">
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
</ul>
<ul class="list-group">
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
</ul>
<ul class="list-group">
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>
Вот это на Bootply. В Firefox все нормально: первые 3 группы списков идут в первом столбце, следующие 3 - во втором. Но в Chrome первые 4 идут в первом столбце, оставляя второй столбец очень коротким, имея только 2. Как мне его сбалансировать?
(Я также заметил другую проблему, описанную втот же вопрос, на который я ссылался выше где иногда Chrome создает большую границу под колонками, но я оставлю это для отдельного вопроса позже.)