0

我最近下载了 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，我发现选项卡和药丸都溢出了它们的包含元素，所以对于导航选项卡，内容在页面上，文本不再在列的左侧排列 -即文本显示在列之外。

上面的标记有问题吗？

4

1 回答 1

1

解决方案：

  • 每个标签，如input, div, table,ul 都应该有一个span*类。不是必需的，但推荐。
  • 为了实现%而不是px值：row-fluid，container-fluid应该应用。Child 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 -->
于 2012-11-13T20:05:50.597 回答