7

これは、TwitterBootstrapへの私の最初の進出です。こちらのテンプレートをご覧ください： http ：//twitter.github.com/bootstrap/examples/hero.html

ul見出しの1つの下で、longを2つの列に分割したいと思います。

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

コード内で2つの別々<ul>のsにすることができ、2つの箇条書きの列が隣り合っているように見える必要があります。

誰かが私に方法を勧めることができますか？これまでの私の問題は、画面サイズに対応できるようにすることです。そのため、狭い画面では、2つの別々のリストが互いにいくらか重なり合っています。

ありがとう！

4

2 に答える 2

9

span4divタグ内で流体グリッドシステムを使用します。ここで流体グリッドシステムをチェックしてください... 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>
于 2012-06-26T06:57:11.687 に答える
1

これは、1つの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
于 2014-04-04T12:17:23.193 に答える