Twitter Bootstrap 3 form-inline文本輸入寬度取決於標籤寬度

我注意到Twitter Bootstrap 3的奇怪行爲：輸入框的大小取決於它們與form-group分組時的標籤大小：Twitter Bootstrap 3 form-inline文本輸入寬度取決於標籤寬度

<form class="form-inline"> 
    <div class="form-group"> 
     <label>A</label> 
     <input type="text" class="form-control" placeholder="First Name"> 
     </div> 
    <div class="form-group"> 
     <label>Last Name</label> 
     <input type="text" class="form-control" placeholder="Last Name"> 
    </div> 
</form>

這裏是演示：http://jsfiddle.net/a3vAP/4/

這是功能或者錯誤？什麼是修復？我需要相同大小的輸入框。

來源

2013-10-15 Zoran Kalinić

較長的標籤會導致輸入變長，因爲它們都包含在相同的form-group中，因爲它使用display:inline-block，所以它會自動調整爲label的寬度。

根據引導文檔..

「輸入，選擇和文字區域是寬100％，在默認情況下引導。使用內嵌的形式，你必須設置一個寬度在表格上內使用了控件。「

所以，你需要添加一些簡單的CSS來控制寬度..

.form-inline .form-group input { 
    width:140px; 
}

演示：http://bootply.com/87747

來源

2013-10-15 11:30:59 ZimSystem

有一件事我沒有注意 - 這個CSS沒有正確地爲我工作因爲我也使用了「在線」類。檢查Bootstrap文檔首先出現以下內容：「這隻適用於寬度至少爲768px的視口內的表單」。由此產生的CSS檢查也在瀏覽器中產生了以下結果：'@media（min-width：768px）'因此，只有在視口<768時，我的覆蓋樣式纔會生效，然後我的輸入更改爲我想要的大小這個答案的CSS。：S如果使用'form-inline'，你必須處理這個媒體查詢 – atconway

Twitter Bootstrap 3 form-inline文本輸入寬度取決於標籤寬度

回答

相關問題