问题
I am trying to figure out the best way to create vertical multi-column lists in a grid framework like Bootstrap or Foundation. I already know how to do this in a couple of ways, but the way I want it I am not sure is possible to do with just CSS. I need the li tags to come directly after the ul tag without a col-*-* divs between.
To best describe what I want, I'll first show most people would roughly go about a 3 column list:
<ul class="row">
<li class="col-sm-4">A</li>
<li class="col-sm-4">B</li>
<li class="col-sm-4">C</li>
<li class="col-sm-4">D</li>
<li class="col-sm-4">E</li>
<li class="col-sm-4">F</li>
</ul>
The problem here is that the output will not be vertically read, and that is what I want. This would produce more of a horizontal list where the columns are not in the desired order like this:
A B C
D E F
Now here is my solution (not good enough):
<div class="row">
<div class="col-sm-12">
<div class="row">
<ul>
<div class="col-sm-4">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li>
<li>G</li>
</div>
<div class="col-sm-4">
<li>H</li>
<li>I</li>
<li>J</li>
<li>K</li>
<li>L</li>
<li>M</li>
<li>N</li>
</div>
<div class="col-sm-4">
<li>O</li>
<li>P</li>
<li>Q</li>
<li>R</li>
<li>S</li>
<li>T</li>
<li>U</li>
</div>
</ul>
</div>
</div>
</div>
This way I get the desired order result of:
A H O
B I P
C J Q
D K R
E L S
F M T
G N U
But it's not good enough for me because the li tags do not immediately follow after the ul tag.
Is there any way I can accomplish this 3 column list without separating groups of li tags from one another?
Note: I'd also like to point out the benefit of doing it like example #1 which would give you automatic columns so that's great if you're working on an app or with PHP. I would hopefully like to keep that functionality if possible.
Thank you in advance to any assistance. This is tough to describe so please ask me a question to clarify if you don't understand. Thanks!
回答1:
I believe this is what you're trying to do or hopefully it helps you figure out exactly what you're trying to do.
Example 1: columns as the unordered list class and your content inside the list items.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row text-center">
<ul class="col-sm-4 list-unstyled">
<li class="alert alert-info">A</li>
<li class="alert alert-info">B</li>
<li class="alert alert-info">C</li>
<li class="alert alert-info">D</li>
<li class="alert alert-info">E</li>
<li class="alert alert-info">F</li>
<li class="alert alert-info">G</li>
</ul>
<ul class="col-sm-4 list-unstyled">
<li class="alert alert-danger">H</li>
<li class="alert alert-danger">I</li>
<li class="alert alert-danger">J</li>
<li class="alert alert-danger">K</li>
<li class="alert alert-danger">L</li>
<li class="alert alert-danger">M</li>
<li class="alert alert-danger">N</li>
</ul>
<ul class="col-sm-4 list-unstyled">
<li class="alert alert-warning">O</li>
<li class="alert alert-warning">P</li>
<li class="alert alert-warning">Q</li>
<li class="alert alert-warning">R</li>
<li class="alert alert-warning">S</li>
<li class="alert alert-warning">T</li>
<li class="alert alert-warning">U</li>
</ul>
</div>
</div>Example 2: A nested grid with rows as the unordered list class and columns as list items with your content inside.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row text-center">
<div class="col-sm-4">
<ul class="row list-unstyled">
<li class="col-sm-12">
<div class="alert alert-info">A</div>
</li>
<li class="col-sm-12">
<div class="alert alert-info">B</div>
</li>
<li class="col-sm-12">
<div class="alert alert-info">C</div>
</li>
<li class="col-sm-12">
<div class="alert alert-info">D</div>
</li>
<li class="col-sm-12">
<div class="alert alert-info">E</div>
</li>
<li class="col-sm-12">
<div class="alert alert-info">F</div>
</li>
<li class="col-sm-12">
<div class="alert alert-info">G</div>
</li>
</ul>
</div>
<div class="col-sm-4">
<ul class="row list-unstyled">
<li class="col-sm-12">
<div class="alert alert-danger">H</div>
</li>
<li class="col-sm-12">
<div class="alert alert-danger">I</div>
</li>
<li class="col-sm-12">
<div class="alert alert-danger">J</div>
</li>
<li class="col-sm-12">
<div class="alert alert-danger">K</div>
</li>
<li class="col-sm-12">
<div class="alert alert-danger">L</div>
</li>
<li class="col-sm-12">
<div class="alert alert-danger">G</div>
</li>
<li class="col-sm-12">
<div class="alert alert-danger">N</div>
</li>
</ul>
</div>
<div class="col-sm-4">
<ul class="row list-unstyled">
<li class="col-sm-12">
<div class="alert alert-warning">O</div>
</li>
<li class="col-sm-12">
<div class="alert alert-warning">P</div>
</li>
<li class="col-sm-12">
<div class="alert alert-warning">Q</div>
</li>
<li class="col-sm-12">
<div class="alert alert-warning">R</div>
</li>
<li class="col-sm-12">
<div class="alert alert-warning">R</div>
</li>
<li class="col-sm-12">
<div class="alert alert-warning">T</div>
</li>
<li class="col-sm-12">
<div class="alert alert-warning">U</div>
</li>
</ul>
</div>
</div>
</div>来源：https://stackoverflow.com/questions/33699782/multi-column-lists-in-bootstrap-foundation