ブートストラップモーダルタブ内に列を含める

Question

ブートストラップモーダル内に一連の列を追加しようとしています。 （列なし）罰金以下の作品は：

<div class="container"> 
    <div id="updateModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-type="strength"> 
     <div class="modal-dialog"> 
      <div class="modal-content"> 
       <div class="modal-header"> 
        <h3 id="myModalLabel" class="text-center">Invoice <span class="itemID"></span></h3> 
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
       </div> 
       <div class="modal-body"> 
        <div class="tabbable"> 
         <ul class="nav nav-tabs" style="display: none"> 
          <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"> 
           <h3>Test</h3> 
           <h3>Test</h3> 
           <h3>Test</h3> 
           <h3>Test</h3> 
           <h3>Test</h3> 
          </div> 
          <div class="tab-pane" id="tab2"> 
           <p>Data 2.</p> 
          </div> 
         </div> 
        </div> 
        </div> 
       </div> 
      </div> 
     </div> 
</div> 

しかし、最初のタブに列を追加すると、下のモーダル内容をカバーするためにストレッチしないように書式設定をオフにスローされます。

<div class="tab-pane active" id="tab1"> 
    <div class="col-md-7"> 
     <h3>Test</h3> 
     <h3>Test</h3> 
     <h3>Test</h3> 
     <h3>Test</h3> 
     <h3>Test</h3> 
    </div> 
    <div class="col-md-5"> 
     <h3>Test</h3> 
     <h3>Test</h3> 
     <h3>Test</h3> 
     <h3>Test</h3> 
     <h3>Test</h3> 
    </div> 
</div> 

ブラウザで高さ決定要因を見つけようとしましたが、そのプロパティは暗黙的なようです。これは十分に簡単なように思えますが、何が間違っていますか？

Answer 1

.col-*-*だけでなく、ブートストラップグリッドフレームワーク全体を使用する必要があります。だから、あなたはあなたの.containerを指定してください（.container-fluidをお勧めします）と、あなたの.row

<div class="tab-pane active" id="tab1"> 
    <div class="container-fluid"> 
     <div class="row"> 
      <div class="col-md-7"> 
       <h3>Test</h3> 
       <h3>Test</h3> 
       <h3>Test</h3> 
       <h3>Test</h3> 
       <h3>Test</h3> 
      </div> 

      <div class="col-md-5"> 
       <h3>Test</h3> 
       <h3>Test</h3> 
       <h3>Test</h3> 
       <h3>Test</h3> 
       <h3>Test</h3> 
      </div> 
     </div> 
    </div> 
</div>