Twitter引导程序：英雄示例“容器”元素中不包含导航选项卡和药丸

Question

我最近下载了 TB 2，并开始熟悉它。我正在根据英雄示例创建一个页面。

我正在根据英雄示例创建一个页面。页面内容区域是我的标记中具有“容器”类的元素。我正在创建的布局如下（在“容器”元素内），创建两列：

• 左侧栏（页面面积的 66.66%）
• 右侧栏（页面面积的 33.33%）

左侧列将包含两行，顶行包含导航药丸，底行包含导航选项卡。

这是“容器”元素中的 HTML：

<div class="row">
    <div id="page-left-column" class="span8">
        <div class="row">
            <ul class="nav nav-pills pull-right">  
                <li class="active"><a href="#">Pill 1</a></li>     
                <li><a href="#">Pill 2</a></li>  
                <li><a href="#">Pill 3</a></li>   
                <li><a href="#">Pill 4</a></li>   
                <li><a href="#">Pill 5</a></li>   
            </ul> 
        </div>

        <div class="row">
            <ul class="nav nav-tabs">  
                <li class="active"><a href="#">Tab 1</a></li>
                <li><a href="#">Tab 2</a></li>  
                <li><a href="#">Tab 3</a></li>   
            </ul>
        </div>

    </div>

    <div id="page-right-column" class="span4">
        <div class="row">
        </div>

        <div class="row">
        </div>        
    </div>
</div>

使用 Firebug，我发现选项卡和药丸都溢出了它们的包含元素，所以在导航选项卡的情况下，内容在页面上，文本不再排列在左侧列 - 即文本显示在列之外。

上面的标记有问题吗？

Answer 1

解决方案：

• input、div、table、ul 等每个标签都应该有一个 span* 类。不是必需的，但建议使用。
• 为了在值上实现% 而不是px：应该应用row-fluid、container-fluid。子 span* 将跟随其容器。
• 推荐的模式是：容器、跨度、容器、跨度、容器、跨度等。
• 容器可以是（容器或行（流体或非流体））。 Span 可以是容器内的任何元素/标签。

CSS：

        .border {
            border: 1px solid #afafaf;
        }
        #page-right-column {
            margin:0;
        }

HTML：

    <div class="container border">
        <div class="span12">
            <div class="row-fluid">
                <div id="page-left-column" class="span8">
                    <div class="row">
                        <div class="span12">
                            <ul class="nav nav-pills pull-right">  
                                <li class="active"><a href="#">Pill 1</a></li>     
                                <li><a href="#">Pill 2</a></li>  
                                <li><a href="#">Pill 3</a></li>   
                                <li><a href="#">Pill 4</a></li>   
                                <li><a href="#">Pill 5</a></li>   
                            </ul> 
                        </div>
                    </div>
                    <div class="row">
                        <div class="span12">
                            <ul class="nav nav-tabs">  
                                <li class="active"><a href="#">Tab 1</a></li>
                                <li><a href="#">Tab 2</a></li>  
                                <li><a href="#">Tab 3</a></li>   
                            </ul>
                        </div>
                    </div>
                </div><!-- End of #page-left-column -->
                <div id="page-right-column" class="span4">
                    <div class="row-fluid border">
                        <div class="span12">
                            First row of right column. 
                        </div>
                        <div class="span12">
                            Second row of right column
                        </div>
                    </div>
                </div><!-- End of #page-right-column -->
            </div><!-- End of .container-fluid -->
        </div>
    </div><!-- End of .container -->