列表组的Bootstrap水平堆叠

Question

如何将此外观作为垂直列分隔的水平单行/行列表(而不是具有一列的一组行,如下所示) 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代替？我需要类似于list-group/list-group-item的边框分隔.

Answer 1

只需将您的班级list-group改为list-inline.其他一切都保持不变.

Answer 2

你可以设置float: left你的li元素,使之在一个水平线上.

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

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

小提琴

同样根据您给定的代码,我相信您不需要使用#with-button-elements和#nav-disabled-links.上面的例子会很好.

Answer 3

对于 Bootstrap 4，替换list-group为d-flex flex-wrap.

https://jsfiddle.net/rd5my6hf/

Answer 4

Easy AF（Bootstrap 4）

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