Bootstrap/Foundation中的多列列表 [英] Multi-column lists in Bootstrap/Foundation
问题描述
我正在尝试找出在诸如Bootstrap或Foundation之类的网格框架中创建垂直多列列表的最佳方法.我已经知道如何通过几种方法来做到这一点，但是我不确定我是否可以仅使用CSS来做到这一点.我需要li标记紧跟在ul标记之后，且之间没有col-*-* div.
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.
为了最好地描述我想要的内容，我将首先向大多数人展示大概包含3列的列表:
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
但这对我来说还不够好，因为li标记不会紧随ul标记之后.
But it's not good enough for me because the li tags do not immediately follow after the ul tag.
有什么方法可以完成这3列列表，而又不会将li标签的组彼此分开?
Is there any way I can accomplish this 3 column list without separating groups of li tags from one another?
注意:我也想指出这样做的好处，例如示例#1，它会为您提供自动列，因此，如果您使用的是应用程序或PHP，那会很棒.我希望尽可能保留该功能.
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!
推荐答案
我相信这就是您要尝试执行的操作，或者希望它可以帮助您准确地确定要执行的操作.
I believe this is what you're trying to do or hopefully it helps you figure out exactly what you're trying to do.
示例1:将columns作为unordered列表类，并将您的内容放在列表项中.
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>
示例2:一个嵌套的网格，其中rows作为无序列表类，而columns作为列表项，其中包含您的内容.
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>
这篇关于Bootstrap/Foundation中的多列列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
