Bootstrap horizontal stacking of list-group

问题:

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

<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-elements in this case? Or should http://getbootstrap.com/components/#nav-disabled-links be used instead? I need the border seperation similar to list-group/list-group-item.

回答1:

You can set float: left to your li elements to make it horizontal in one line.

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

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

Fiddle

Also from your given code I believe you don't need to make use of the #with-button-elements and #nav-disabled-links. The above example will do just fine.

回答2:

Just change your class list-group to list-inline. Everything else stays the exact same.

回答3:

easy af (bootstrap 4)

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

回答4:

For Bootstrap 4, replace list-group with d-flex flex-wrap.

https://jsfiddle.net/rd5my6hf/

回答5:

You can add new class .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

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