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;
}

Fiddle

同样根据您提供的代码，我认为您不需要使用#with-button-elements和#nav-disabled-links。上面的例子就可以了。

Answer 3

easy af（bootstrap 4）

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

Answer 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>

它基于这个要点（隐藏了重复的左/右边框）：https://gist.github.com/danielflippance/d6401c926b4fb2442e15

小提琴：https://jsfiddle.net/qfws2gxf/

Answer 5

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

https://jsfiddle.net/rd5my6hf/

列表组的Bootstrap水平堆叠

5 个答案: