爲什麼twitter引導程序以橫向格式超過跨度

Question

我正在嘗試使用Twitter Bootsrap（即12列網格）佈局表單。

我有一個雙列布局 - 2/3 - 1/3所以我有一個2個div與span8和span4作爲他們各自的類。

這可以正常工作，但是當我使用窗體水平類在窗體內部做同樣的事情時，標籤看起來更寬一些，並將文本框推到了陰溝中。

我該如何解決這個問題？

這是jsfiddle中的一個演示。頂部工作正常，第二種形式是奇怪的。

<div class="container"> 
<form class=""> 
    <div>This form is fine!</div> 
    <div class="row"> 
     <div class="span8">Span 8</div> 
     <div class="span4">Span 4</div> 
    </div> 
    <div class="row"> 
     <div class="span8"> 
      <div class="control-group"> 
       <label class="control-label">Name</label> 
       <div class="controls"> 
        <input type="text" class="span8" /> 
       </div> 
      </div> 
     </div> 

     <div class="span4"> 
      <div class="control-group"> 
       <label class="control-label">Age</label> 
       <div class="controls"> 
        <input type="text" class="span4" /> 
       </div> 
      </div> 
     </div> 
    </div> 
</form> 

<form class="form-horizontal"> 
    <div>This form is broken!</div> 
    <div class="row"> 
     <div class="span8">Span 8</div> 
     <div class="span4">Span 4</div> 
    </div> 
    <div class="row"> 
     <div class="span8"> 
      <div class="control-group"> 
       <label class="control-label">Name</label> 
       <div class="controls"> 
        <input type="text" class="span6" /> 
       </div> 
      </div> 
     </div> 

     <div class="span4"> 
      <div class="control-group"> 
       <label class="control-label">Age</label> 
       <div class="controls"> 
        <input type="text" class="span2" /> 
       </div> 
      </div> 
     </div> 
    </div> 
</form> 

</div> 

這裏的My jsfiddle

Answer 1

望着CSS，看起來他們並沒有在你有正確的情況下算出來的表單域的寬度。您可以使標籤寬度更小（這是我所做的），或者使輸入字段更小。

如果添加這個CSS應該解決您的問題：

.form-horizontal .control-label { 
    width: 100px; 
} 
.form-horizontal .controls{ 
    margin-left: 120px; 
} 

/* if you are using responsive bootstrap */ 
@media (max-width: 480px) { 
    .form-horizontal .controls { 
     margin-left: 0; 
    } 
} 

http://jsfiddle.net/hajpoj/LutqC/1/