如何對齊（寬度明智）引導選擇下拉框與輸入框？

我在窗體上使用引導選擇。就在下面我有一個輸入框。我想輸入框的寬度與選擇框類似。如何對齊（寬度明智）引導選擇下拉框與輸入框？

<div class="container-fluid"> 
    <div class="row"> 
    <div class="col-md-12"> 
     <select class="selectpicker"> 
     <option>Mustard</option> 
     <option>Ketchup</option> 
     <option>Relish</option> 
     </select> 
    </div> 
    </div> 
    <div class="row"> 
    <div class="col-md-2"> 
    </div> 
    <div class="col-md-8"> 
     <input class="form-control" id="input_id" type="text" value="" /> 
    </div> 
    <div class="col-md-2"> 
    </div> 
    </div> 
</div>

請參閱：https://jsfiddle.net/5L30q27f/8/

在引導-select.css，看來寬度已被設置爲220px。我可以使用精確寬度爲我的輸入框，但我不認爲這是一個好主意，因爲我懷疑在移動設備上的引導，選擇可能會改變這種寬度別的東西。

目前，我使用控制我的欄輸入框的寬度，但它不是正確的解決方案。（寬度看起來根據屏幕大小而變化）。

我使用bootstarp第一次。所以很有可能我忽視了bootstrap提供的明顯的解決方案。

能否請你點我到正確的方向？

來源

2016-08-08 Icarus3

使用列設置一個形式元素的寬度是自舉的Twitter文檔中提出的方式：http://v4-alpha.getbootstrap.com/components/forms/#column-sizing什麼是問題？ – feeela

問題是，輸入框的寬度需要與下拉框的寬度相匹配。正如你所看到的，我嘗試過使用列，但沒有幫助。 – Icarus3

引導具有用於設置根據屏幕尺寸http://getbootstrap.com/css/#grid-options元素的寬度的幾個選項。更改網格，使用xs選項在你的小提琴獲得你想要的結果。

https://jsfiddle.net/5L30q27f/9/

來源

2016-08-08 14:29:11 axrami

感謝您的回答，但輸入框的寬度顯示大於下拉框的寬度（t =至少在我的屏幕上）。 – Icarus3

可能是屏幕尺寸/分辨率差異。您可以添加多個或所有的'.COL-'類，它的大小的正確的差別屏幕 – axrami

我想我解決了這個問題，使用「XS」看着由@feeela共享的鏈接我加「的形式控制」級到「選擇」元素。：請檢查，https://jsfiddle.net/5L30q27f/10/ – Icarus3

如何對齊（寬度明智）引導選擇下拉框與輸入框？

回答

相關問題