list 列表组的 Bootstrap 水平堆叠
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31979850/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap horizontal stacking of list-group
提问by Loser Coder
How can I make this look as a horizontal one line/row list seperated as vertical columns (instead of a set of rows with one column, as below) http://getbootstrap.com/components/#list-group-basic
我怎样才能使它看起来像一个水平的单行/行列表，分隔为垂直列（而不是一组带有一列的行，如下所示） 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>
Does it make sense to make use of http://getbootstrap.com/components/#with-button-elementsin this case? Or should http://getbootstrap.com/components/#nav-disabled-linksbe used instead? I need the border seperation similar to list-group/list-group-item.
在这种情况下使用http://getbootstrap.com/components/#with-button-elements有意义吗？还是应该改用http://getbootstrap.com/components/#nav-disabled-links？我需要类似于 list-group/list-group-item 的边框分隔。
采纳答案by Robin Carlo Catacutan
You can set float: leftto your lielements to make it horizontal in one line.
你可以设置float: left你的li元素，使其在横向一行。
ul.list-group:after {
clear: both;
display: block;
content: "";
}
.list-group-item {
float: left;
}
Also from your given code I believe you don't need to make use of the #with-button-elementsand #nav-disabled-links. The above example will do just fine.
同样从您给定的代码中，我相信您不需要使用#with-button-elements和#nav-disabled-links。上面的例子就可以了。
回答by Greg Johnson
Just change your class list-groupto list-inline. Everything else stays the exact same.
只需将您的课程更改list-group为list-inline. 其他一切都保持完全相同。
回答by Muhammad Taha
easy af (bootstrap 4)
简单的 af（引导程序 4）
.list-group{
flex-direction: row;
}
回答by DharmaTurtle
For Bootstrap 4, replace list-groupwith d-flex flex-wrap.
对于 Bootstrap 4，替换list-group为d-flex flex-wrap.
回答by mkczyk
You can add new class .list-group-horizontal:
您可以添加新类.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;
}
Then just use it:
然后只需使用它：
<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>
It's based on this gist (imporoved for hide duplicate left/right borders): https://gist.github.com/danielflippance/d6401c926b4fb2442e15
它基于这个要点（为了隐藏重复的左/右边框而改进）：https://gist.github.com/danielflippance/d6401c926b4fb2442e15
Fiddle: https://jsfiddle.net/qfws2gxf/
