响应式 Twitter 引导程序中的两列项目符号列表答案

【问题标题】：Two Columns Bulleted Lists in responsive twitter bootstrap响应式 Twitter 引导程序中的两列项目符号列表
【发布时间】：2012-06-27 08:04:30
【问题描述】：

这是我第一次涉足 Twitter Bootstrap。在此处查看此模板： http://twitter.github.com/bootstrap/examples/hero.html

在其中一个标题下，我想将一个很长的ul 分成两列：

*item1 *item4
*项目2 *项目5
*项目3 *项目6

在代码中可以是两个独立的<ul>s，它只需要看起来像两个相邻的项目符号列。

有人可以向我推荐一种方法吗？到目前为止，我的问题是保持它对屏幕大小的响应，因此缩小屏幕，这两个单独的列表再次相互堆叠。

谢谢！

【问题讨论】：

在每个 ul 上使用 float: left

标签： html css twitter-bootstrap responsive-design

【解决方案1】：

我会在 span4 div 标签内使用流动网格系统。在这里查看流体网格系统... http://getbootstrap.com/css/#grid

使用此方法，当屏幕较小时，列表将再次相互堆叠。

这是一个例子......

<html>
<head>
    <title></title>
    <link href="css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
    <script src="js/bootstrap.min.js" type="text/javascript"></script>
</head>
<body>
        <div class="container">
            <div class="row">
                <div class="span4">
                    <h4>Column 1</h4>
                    <div class="container-fluid">
                        <div class="row-fluid">
                            <div class="span6">
                                <ul>
                                    <li>Item 1</li>
                                    <li>Item 2</li>
                                    <li>Item 3</li>
                                </ul>
                            </div>
                            <div class="span6">
                                <ul>
                                    <li>Item 4</li>
                                    <li>Item 5</li>
                                    <li>Item 6</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="span4">
                    <h4>Column 2</h4>
                </div>
                <div class="span4">
                    <h4>Column 3</h4>
                </div>
            </div>
        </div>
</body>
</html>

【讨论】：

@jpfreire - 你没有使用引导程序，难怪你的列表看起来这么好。 ;-)
@Ace 他正在使用引导程序，难怪他的列表看起来这么好。

【解决方案2】：

如果您有一个 ul 和多个 li，这应该会有所帮助

css

  @media (min-width:768px) { 
    .col2{ width:100%;}
    .col2 li{width:49%; float:left;}
  }

html(haml)

  .box-body      
    .row-fluid
      %ul.col2.clearfix
       -@categories.each do |category|
         %li
         =category.title

【讨论】：