跨度加起來父母在bootstrap不工作，如果在井裏

Question

<div class="row"> 
    <div class="span8"> 
     <div class="well well-large"> 
      <h3>Place an Order</h3> 

      <div class="row"> 
       <div class="span3">Bid Price</div> 
       <div class="span2">Execute</div> 
       <div class="span3">Ask Price</div> 
      </div> 
     </div> 

這是我的結構。買價，執行價和賣價都應該放在同一行。因爲他們處於良好的狀態，他們似乎沒有。這是否是已知的行爲，無論如何都存在？

Answer 1

爲什麼嵌套行不符合一行？

問題是填充和從well元素的邊框。 span8類在固定寬度row內的固定寬度爲620px。

的well-large元件具有24像素的填充（綠色部分）和1像素的邊界，因此嵌套行將藍色部分的內部。但藍色部分沒有620px的寬度，它有一個570px的寬度。

嵌套行內的span元件還具有一個固定的寬度。 span2的寬度爲140px，span3的寬度爲220px。

如果添加所有從span元件的寬度和它們的邊距（220px + 140px + 220px +（20像素* 2）= 620px），該行的總寬度比well元件更大（570px），所以最後一個元素被推送到下一行。

如何解決？

首次嘗試

我的第一個和更簡單的方法，是把類span8在那樣的well元素（JSFiddle）：

<div class="row"> 
    <div class="span8 well well-large"> 
     <h3>Place an Order</h3> 

     <div class="row"> 
     <div class="span3">Bid Price</div> 
     <div class="span2">Execute</div> 
     <div class="span3">Ask Price</div> 
     </div> 
    </div> 
</div> 

這解決了前面的問題，但增加了一個問題。由於填充現在位於span8元素中，主網格被破壞，因爲well元素的寬度爲670px（寬度爲620px，必須從填充和井的邊界添加50px）。

但現在的藍色部分，具有寬度的620px，因此嵌套行的所有元素可以在藍色部分完全適合。但正如我之前所說，電網已經壞了。例如，如果在span8之後添加span4元素，則span4正被推送到下一行，就像之前發生的嵌套元素一樣。

所以用這個佈局（JSFiddle）：

<div class="row"> 
    <div class="span8 well well-large"> 
     <!-- Some ramdom text --> 
    </div> 
    <div class="span4"> 
     <!-- Some ramdom text --> 
    </div> 
</div> 

你有這樣的結果：如果你想有一個well內3列

最終解決

，你需要不同的網格系統。一種解決方案可以使用row-fluid而不是row。使用row-fluid時，span元素的寬度是百分比，而不是固定寬度。

採用這種佈局（JSFiddle）：

<div class="row"> 
    <div class="span8"> 
     <div class="well well-large"> 
      <h3>Place an Order</h3> 

      <div class="row-fluid"> 
       <div class="span4">Bid Price</div> 
       <div class="span4">Execute</div> 
       <div class="span4">Ask Price</div> 
      </div> 
     </div> 
    </div> 
</div> 

可以實現類似於你想要的東西真了不起。如果你想要3/8，2/8和3/8的精確比例（就像你的初始設置跨度一樣），你必須使用CSS來創建三列布局，你不能僅使用引導span元素。