跨度範圍內的自舉跨度

Question

我很難理解如何跨度跨度跨度自舉。

我想有一個街區的中心，裏面：

-One行裏面：
-One塊左邊（span6）右（span6） -One塊

-One行裏面： -One按鈕中心（跨度6 OFFSET3）

你可以看到這裏的問題： http://jsfiddle.net/UBTv4/18/

<div class='row'> 
<div class='span6 offset3'> 
    <div class='well'> 
     <h2>Title</h2>  
      <div class='row'> 
       <div class='span6'> 
        <p class="lead">Bloc left : </p> 
       </div>    
       <div class='span6'> 
        <p class="lead">Bloc right : </p> 
       </div> 
      </div> 
      <div class='row'> 
       <div class='span6 offset3'> 
        <input id="play" type="submit" value="play" class="btn btn-primary"/>  
       </div> 
      </div> 
    </div> 
</div> 

什麼問題？

我想這樣的事情：

Answer 1

我想你想使用.row-fluid代替。這會讓你的2 .span6是一行。

這裏是更新的小提琴：http://jsfiddle.net/skelly/UBTv4/22/

Answer 2

你也可以使用右拉式和拉左，使各塊左右移動。

</div>    
       <div class='span6'> 
        <p class="lead pull-right">Bloc right : </p> 
       </div> 
      </div> 
      <div class='row'> 
       <div class='span6 offset3'> 
        <input id="play" type="submit" value="play" class="btn btn-primary"/>  
       </div> 
      </div> 
    </div> 
</div> 

你可以看到這裏的代碼：http://jsfiddle.net/UBTv4/18/

Answer 3

這裏是您的解決方案。

<div class='row'> 
    <div class='span6 offset3 well' > <!-- .well class here instead of inner div --> 
      <h2>Title</h2>  
       <div class='row'> 
        <div class='span3'> <!-- instead of span6 --> 
         <p class="lead">Bloc left : </p> 
        </div>    
        <div class='span3'> <!-- instead of span6 --> 
         <p class="lead">Bloc right : </p> 
        </div> 
       </div> 
       <div class='row'> 
        <div class='span3 offset3'> <!-- instead of span6 --> 
         <input id="play" type="submit" value="play" class="btn btn-primary"/>  
        </div> 
       </div> 
     </div> 
</div> 

http://jsfiddle.net/UBTv4/23/

作爲解釋，我會建議你仔細閱讀嵌套柱截面從這個鏈接：

http://getbootstrap.com/2.3.2/scaffolding.html

在簡短的說明，如果你嵌套行的span6，內部行跨度的總和應該是6也是（3 + 3）。

此外，.well類有一些padding/marings，所以你不能在「父」和嵌套行/跨度之間。