Question

我想用bootstrap创建一个小的两列菜单。这个想法是有一个200px到300px高的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一样？

Answer 1

从您的示例中，我认为您希望span2 div实际您的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>

请参阅this jsfiddle了解演示。

Answer 2

每列的父级应该是一行。

所以，试试以下结构。

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

Reference

Span2 Twitter Bootstrap in Small Div

2 个答案: