Twitter bootstrap 列表组的引导水平堆叠

我怎样才能使它看起来像一个水平的单行/行列表，以垂直列分隔（而不是一组行和一列，如下所示）

Cras justo odio
Dapibus ac设施在
Morbi leo risus
Porta ac concetetur ac
eros的前庭

---

在这种情况下使用有意义吗？还是应该用它来代替？我需要类似于列表组/列表组项目的边框分隔

您可以将

float:left

设置为

li

元素，使其在一行中保持水平

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

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

---

同样从您给定的代码来看，我相信您不需要使用和。上面的例子很好。

只需将类

列表组更改为
列表内联
。其他所有内容都保持不变。
您可以添加新类
。列表组水平
：

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


Cras justo odio
Dapibus ac设施在
Morbi leo risus
Porta ac concetetur ac
eros的前庭


它基于以下要点（对于隐藏重复的左/右边框，已导入）：

小提琴：
简易自动对焦（引导4）

对于引导4，将
列表组
替换为
d-flex-wrap

不幸的是，当我在移动设备/小型计算机上试用时，它没有起作用screen@LoserCoder可能是因为没有足够的空间来放置另一件物品，这就是为什么它们会彼此分开。您可以在移动设备上减少它们的填充。还有一种可能是您在移动设备上加载的某些样式导致了问题。您可以尝试使用
display:flex
。此答案提供了Bootstrap 3中的CSS类，因此您不需要任何自定义CSS。这在Bootstrap 4中不起作用<代码>列表内联

用于将

元素内联排列而不带项目符号，而不是

列表组项

s。如果使用

list inline

，则所有花式样式都将被删除。请参阅新的。某些项目还具有

宽度：

00%`并打破了水平行为，因此它也可能有助于包括类似

.list group horizontal.list group item>*{width:auto；}

的内容。不过真的很有帮助，谢谢。

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

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