0

私は最近TB2をダウンロードし、それに慣れ始めました。ヒーローの例に基づいてページを作成しています。

ヒーローの例に基づいてページを作成しています。ページコンテンツ領域は、マークアップにクラス「container」がある要素です。私が作成しているレイアウトは次のとおりです（'container'要素内）。2つの列を作成します。

  • 左側の列（ページ領域の66.66％）
  • 右側の列（ページ領域の33.33％）

左側の列には2つの行が含まれ、上の行にはナビゲーションピルが含まれ、下の行にはナビゲーションタブが含まれます。

これは、「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を使用すると、タブとピルの両方が含まれている要素からこぼれていることがわかりました。そのため、コンテンツがページ上にあるナビゲーションタブの場合、テキストが列の左側に並んでいません-つまり、テキストは列の外側に表示されます。

上記のマークアップに何か問題がありますか？

4

1 に答える 1

1

ソリューション：

  • 、、、などの各タグinputにはクラス が必要です。必須ではありませんが、お勧めします。divtableulspan*
  • 値%ではなく実装するには、：を適用する必要があります。子スパン*はそのコンテナに従います。pxrow-fluidcontainer-fluid
  • 推奨されるパターンは、container、span、container、span、container、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 に答える