0

ブートストラップを学んでいます。タブのコンテンツがタブから押し出されるという奇妙な状況があります。

ページ構成はシンプル。メニューは左にフロートされ、メイン コンテンツにはメニューを保持するための左マージンがあります。

メイン コンテンツ領域には、Bootstrap タブ コンポーネントがあります。

ただし、タブのコンテンツ領域は垂直方向に押し下げられます。コードは次のとおりです。

<div style="width: 100px; float:left;height:300px;background-color:red;">
    left
</div>

<div style="margin-left: 120px; background-color: pink">

    <div class="tabbable">
      <ul class="nav nav-tabs">
        <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
        <li><a href="#tab2" data-toggle="tab">Section 2</a></li>
      </ul>
      <div class="tab-content">
        <div class="tab-pane active" id="tab1">
          <p>I'm in Section 1.</p>
        </div>
        <div class="tab-pane" id="tab2">
          <p>Howdy, I'm in Section 2.</p>
        </div>
      </div>
    </div>

</div>

http://jsfiddle.net/dDNBS/7/で参照してください。

理由がわかりません。修正方法は？

4

1 に答える 1

1

http://jsfiddle.net/dDNBS/7/で js フィドルを更新しました。

コード：

<div class="container">
  <div class="row">        
     <div style="background-color:red;height:150px;" class="span3">
       left
     </div>
     <div style="background-color: pink;height:150px;" class="span9">
          <div class="tabbable">
             <ul class="nav nav-tabs">
                <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
                <li><a href="#tab2" data-toggle="tab">Section 2</a></li>
             </ul>
             <div class="tab-content">
              <div class="tab-pane active" id="tab1">
                <p>I'm in Section 1.</p>
              </div>
              <div class="tab-pane" id="tab2">
                <p>Howdy, I'm in Section 2.</p>
              </div>
             </div>
          </div>
     </div>
  </div>
</div>

ブートストラップを使用しているため、div のインラインを維持するためにスパン クラスを使用する必要があります。デフォルトのブートストラップ グリッド レイアウトは 12 スパンに分割されているため、ここでは左側を span3 で分割し、右側をタブ可能に span9 で分割し、コンテナ クラスに収まるように行クラス内に配置します。

于 2013-07-27T05:51:51.840 に答える