Question

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

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

左栏（页面面积的66.66％）
右栏（页面面积的33.33％）

左侧列包含两行，顶行包含导航片，底行包含导航标签。

这是'container'元素中的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可以是容器内的任何元素/标签。

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

Twitter引导程序：导航选项卡和药丸未包含在英雄示例'container'元素中

1 个答案: