html - Twitter Bootstrap の選択ボックスのサイズ

Question

Twitter Bootstrap を使用しています。選択ボックスは常に入力ボックスよりも狭いです。

どうすれば同じ幅にできますか? パディングを追加すると役立ちますが、見栄えが悪くなります。

編集

ここに小さな例があります - http://jsfiddle.net/DfY8z/2/
カスタムクラスが適用された同じ例 - http://jsfiddle.net/DfY8z/3/

span3などのクラスを使用できますがspan4、入力で利用可能なすべてのスペースを埋める (同じサイズにする) 必要があるため、カスタム クラスを使用しています。

Answer 1

input-smすぐ隣にクラスを追加するだけでform-controlうまくいきました。

<select class="form-control input-sm" id="xxx" ... >

Answer 2

<input type="text" value="" name=""><br>
<select>
 <option>Some options which is very very long... </option>
</select>

結果は、ボックスの正確なサイズです。

Answer 3

コントロールを置く

div 内で、div に class="col-sm-2" を適用します。

<div class="col-sm-2"> <select></select>

必要に応じて col-sm-2 col-sm-3 を変更できます

Answer 4

古いバージョンのブートストラップを使用しているようです (現在のバージョンは 2.2.1)。新しいバージョンの選択ボックスと入力ボックスは、クラスが適用されていないときと、span* メソッドを使用してサイズ変更されたときと同じサイズです

カスタム サイズを設定する必要がある場合は、2 つの異なるカスタム クラスを使用するか、選択ボックスと入力ボックスを個別にターゲットにする必要があります。入力ボックスは、選択ボックスよりも 14 ピクセル小さくする必要があります (テキスト領域と同様)。

更新された例を見る

// code sample because its required
<input class="myClass" type="text" value="Abcdefghijklmnop" />

<br />
<br />

<select class="myClass">
    <option> ABC </option>
    <option> XYZ </option>
</select>

Answer 5

これは機能します：

<select style="width: 200px">...</select>