Bootstrap/Foundation中的多列列表

本文介绍了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="maxcdn.bootstrapcdn/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="maxcdn.bootstrapcdn/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>