Span2 Twitter Bootstrap in a Small Div

Question

I would like to make a small, two-column menu with bootstrap. The idea is to have a div that is 200px by 300px high. The structure would, I think, look like this:

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

The issue is that everything gets mashed to the upper left corner of the menu div. How can I get everything evenly spaced in the meny div as if I were using Bootstrap on a full page?

Answer 1

Parent of every column should be a row.

So, try below structure.

<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

Answer 2

From your example, I think you want the span2 div to actually be your row-fluid as well:

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

See this jsfiddle for a demo.