Question

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

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

* item1 * item4
* item2 * item5
* item3 * item6

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

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

谢谢！

Answer 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>

Answer 2

如果你有一个很多人的话，这应该会有所帮助

<强> 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

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

2 个答案: