Twitter bootstrap - 錯誤順序的字段

我喜歡Bootstrap，但我似乎無法得到我的手的一個煩惱是當建立一個表單，以一個簡單的文本輸入框開始，並在右邊我把一些單選按鈕（不是傳統類型，但Bootstrap指的是「按鈕組」）。令人遺憾的是，輸入框嚴肅地拒絕向左走，總是跳到船的右側。爲什麼哦爲什麼？任何幫助表示讚賞。Twitter bootstrap - 錯誤順序的字段

這裏是什麼樣的形式，看起來像一個畫面： My form with the dyslexic controls

這裏是導致這一突變災難代碼：

<div class="control-group"> 
    <label class="control-label" for="appendedInput">Weight recorded:</label> 
    <div class="controls"> 
     <div class="input"> 
      <input class="input-small" id="weight" size="16" type="text" placeholder="weight" ready-for-history></input> 
      <span class="btn-group" data-toggle="buttons-radio"> 
       <button class="btn active">lbs</button> 
       <button class="btn">kg</button> 
       <button class="btn">stone</button> 
      </span> 
     </div> 
     <p class="help-block">What weight were you?</p> 
    </div> 
</div>

希望這是足夠的信息，有人幫我解決;讓我知道你是否需要更多。

來源

2012-05-05 ken

的按鈕左側浮動 – Esailija

Esailija是正確的。按鈕向左浮動，所以如果你想浮動輸入框。你可以用一些簡單的CSS做到這一點：

#weight{float:left}

或

.input-small{float:left}

您可以使用Twitter的引導form-inline類，以確保所有的控制組元素內嵌顯示（以正確的順序）。通過將form-inine類的<form>標籤做到這一點，或在<div class="form-inline"> ... </div>

來源

2012-05-06 15:43:40 eterps

是的，你是對的。感謝您的聖人建議。我現在正在工作。如果有人關心，我會在下面提供我的解決方案細節 – ken

包裹你的表單字段我添加了兩個CSS類來解決這個問題，一旦Esailija和Eterps幫助讓我專注在正確的軌道上。它們分別是：

我附.padded - 左 - 形式的文本輸入框浮動它留下的單選按鈕，然後你需要的.clear左形式附着在下面的「幫助塊「，使其在垂直方向上位於正確的位置。

到底這裏是什麼樣子：

updated with CSS

來源

2012-05-07 15:19:57 ken

Twitter bootstrap - 錯誤順序的字段

回答

相關問題