はインライン

Question

を表示しない固定幅を持つ要素を選択するブートストラップI（...続きを表して）次のリストがあります。

<div class="form-group"> 
<label class="control-label col-sm-2" for="event_End Time">End time</label> 
<div class="col-sm-10"> 
    <select class="form-control" id="event_endtime_1i" name="event[endtime(1i)]" required="required" style="width: 20px"> 
    <option value="2011">2011</option> 
    <option value="2012">2012</option> 
    <option value="2013">2013</option> 
    ... 
    </select> 
    <select class="form-control" id="event_endtime_2i" name="event[endtime(2i)]" required="required" style="width: 20px"> 
    <option value="1">January</option> 
    <option value="2">February</option> 
    <option value="3">March</option> 
    ... 
    </select> 
    <select class="form-control" id="event_endtime_3i" name="event[endtime(3i)]" required="required" style="width: 20px"> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
    <option value="4">4</option> 
    <option value="5">5</option> 
    <option value="6">6</option> 
    <option value="7">7</option> 
    <option value="8">8</option> 
    <option value="9">9</option> 
    <option value="10">10</option> 
    ... 
    </select> 
— <select class="form-control" id="event_endtime_4i" name="event[endtime(4i)]" required="required" style="width: 20px"> 
    <option value="00">00</option> 
    <option value="01">01</option> 
    <option value="02">02</option> 
    <option value="03">03</option> 
    <option value="04">04</option> 
    <option value="05">05</option> 
    <option value="06">06</option> 
    <option value="07">07</option> 
    <option value="08">08</option> 
    <option value="09">09</option> 
    <option value="10">10</option> 
    ... 
    </select> 
: <select class="form-control" id="event_endtime_5i" name="event[endtime(5i)]" required="required" style="width: 20px"> 
     <option value="00">00</option> 
     <option value="01">01</option> 
     <option value="02">02</option> 
     <option value="03">03</option> 
     <option value="04">04</option> 
     <option value="05">05</option> 
     <option value="06">06</option> 
     <option value="07">07</option> 
     <option value="08">08</option> 
     <option value="09">09</option> 
     <option value="10">10</option> 
     ... 
    </select> 
</div> 
</div> 

が、私は素敵なスタイリングフォームコントロールのCSS宣言オファーをしたいが、

選択要素が隣同士に座ってすることになったが、彼らもありませんされています。結果は次のようになりますので、問題は、ブロックしていないインラインとしてselect要素を表示するように見えることです私はリールを指定しましたがyの本当に小さな幅、ちょうど私のポイントを証明する：

http://www.bootply.com/rmtvHeYqFa

何ブートストラップにインラインフォームコントロールの宣言を表示するための正しい方法なので、私の選択の要素がうまく隣同士に座りますか？

Answer 1

簡単な修正：あなたはdisplay: inline

.form-control { display: inline; } 

Here's a bootply showing the change

を使用するように.form-controlクラスをオーバーライドすることができ、私はこれはあなたのプロジェクトでALLあなた.form-controlクラスを上書きしますので、あなたがかもしれないのに追加されますその代わりに、あなたが望む要素に別のクラスをインライン化し、代わりにそのクラスにプロパティdisplay: inlineを与えたい場合は、!importantを追加してブートストラップをオーバーライドする必要があります。

.new__class { display: inline !important; } 

しかし、あなたは