Загрузочная горизонтальная укладка списка-группы

Как я могу сделать это выглядеть как горизонтальный список строк/строк, разделенных как вертикальные столбцы (вместо набора строк с одним столбцом, как показано ниже) http://getbootstrap.com/components/#list-group-basic

<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>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

Имеет ли смысл использовать http://getbootstrap.com/components/#with-button-elements в этом случае? Или вместо http://getbootstrap.com/components/#nav-disabled-links? Мне нужно разделение границ, подобное элементу списка-группы/списка-группы.

Ответы

Ответ 1

Вы можете установить float: left в свои элементы li, чтобы сделать его горизонтальным в одной строке.

ul.list-group:after {
  clear: both;
  display: block;
  content: "";
}

.list-group-item {
    float: left;
}

Fiddle

Также из вашего кода я считаю, что вам не нужно использовать #with-button-elements и #nav-disabled-links. Вышеприведенный пример будет очень хорошим.

Ответ 2

Просто измените класс list-group на list-inline. Все остальное остается тем же самым.

Ответ 3

легкий аф (начальная загрузка 4)

.list-group{
     flex-direction: row;
 }

Ответ 4

Вы можете добавить новый класс .list-group-horizontal:

.list-group-horizontal .list-group-item {
    display: inline-block;
}
.list-group-horizontal .list-group-item {
    margin-bottom: 0;
    margin-left:-4px;
    margin-right: 0;
    border-right-width: 0;
}
.list-group-horizontal .list-group-item:first-child {
    border-top-right-radius:0;
    border-bottom-left-radius:4px;
}
.list-group-horizontal .list-group-item:last-child {
    border-top-right-radius:4px;
    border-bottom-left-radius:0;
    border-right-width: 1px;
}

Затем просто используйте его:

<ul class="list-group-horizontal">
  <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>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

Это основано на этом значении (imporoved для скрытия дубликатов левых/правых границ): https://gist.github.com/danielflippance/d6401c926b4fb2442e15

Fiddle: https://jsfiddle.net/qfws2gxf/