1

我想用引导程序制作一个小的两列菜单。这个想法是有一个 200 像素 x 300 像素高的 div。我认为结构应该是这样的：

<div id="menu">
    <div class="container">
        <div class="row-fluid">
            <div class="span2">
                <div class="span1">
                    <div class="filterEl">
                        some text
                    </div>
                </div>
                <div class="span1">
                    <div class="filterEl">
                        some text
                    </div>
                </div>
            </div>
        </div>
        <div class="row-fluid">
            <div class="span2">
                <div class="span1">
                    <div class="filterEl">
                        some text
                    </div>
                </div>
                <div class="span1">
                    <div class="filterEl">
                        some text
                    </div>
                </div>
            </div>              
        </div>  
    </div>              
</div>

CSS：

  .menu{
    width:200px;
    height: 300px;
    background-color:green;
    }

    .filterEl{
        position: relative;
        height:40px;
        border: solid black 2px;
    }

问题是所有内容都被捣碎到菜单 div 的左上角。我怎样才能让meny div中的所有内容均匀分布，就好像我在整页上使用Bootstrap一样？

4

2 回答 2

1

每列的父级应该是一行。

所以，试试下面的结构。

<div id="menu">
    <div class="container">
        <div class="row-fluid">
            <div class="span2">
                <div class="row-fluid">
                    <div class="span1">
                        <div class="filterEl">
                            some text
                        </div>
                    </div>
                    <div class="span1">
                        <div class="filterEl">
                            some text
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row-fluid">
            <div class="span2">
                <div class="row-fluid">
                    <div class="span1">
                        <div class="filterEl">
                            some text
                        </div>
                    </div>
                    <div class="span1">
                        <div class="filterEl">
                            some text
                        </div>
                    </div>
                </div>
            </div>             
        </div>  
    </div>              
</div>

参考

于 2013-07-09T05:53:36.490 回答
1

从您的示例中，我认为您希望span2div 实际上也是您row-fluid的：

<div id="menu">
    <div class="container">
        <div class="row-fluid span2">

                <div class="span1">
                    <div class="filterEl">
                        some text
                    </div>
                </div>
                <div class="span1">
                    <div class="filterEl">
                        some text
                    </div>
                </div>

        </div>
        <div class="row-fluid span2">

                <div class="span1">
                    <div class="filterEl">
                        some text
                    </div>
                </div>
                <div class="span1">
                    <div class="filterEl">
                        some text
                    </div>
                </div>

        </div>  
    </div>              
</div>

有关演示，请参阅此 jsfiddle。

于 2013-07-09T05:46:15.883 回答