bootstrap3を使用して2 50％サイズのフォーム要素を表示する方法

Question

デフォルトでは、class = 'form-control'が指定されている場合、ブートストラップのフォーム要素は100％幅です。

私は1つを持っています<div class="col-xs-12 col-md-2"/>です。選択ボックスとテキストボックスを横に（インラインで）ラベルを上にして表示したいと思います。各コンポーネントの幅はわずか50％です。さらに、私はフィドルに以下の利用可能

https://jsfiddle.net/haribalaji/apd1sucL/4/

部分のコードを試してみてください

<div class="col-xs-12 col-md-2"> 

内のパネルを置くしようとしています。

<form> 
    <div class="col-xs-12 col-md-2"> 
     <div class="form-group"> 
      <label for="incidence">Incidence</label> 
      <div class="panel panel-default panel-body"> 
       <div> 
        <select style="margin-top:0px;" class="form-control half-width-form-control" id="incidenceOperator" name="incidenceOperator"> 
        <option value="0" disabled="">Choose Operator</option><option value="1">&lt;</option> 
        <option value="2">≤</option><option selected="" value="3">=</option> 
        <option value="4">≥</option> 
        <option value="5">&gt;</option></select><div class="input"> 
       </div> 
      </div> 
      <input type="text" name="incidence" class="form-control half-width-form-control pull-right"> 
     </div> 
    </div> 
</form> 

私は別の<col-md-1>内部<col-md-1>とテキストボックス内の<select>ボックスをたくありません。

フィドルは、選択ボックスとテキストボックスを上下に表示します。ただし、インラインまたは隣接して表示する必要があります。これをどのように達成するのですか？

Answer 1

ただこれも働い

<form> 
<div class="row"> 
    <div class="col-xs-12 col-md-2"> 
     <div class="form-group"> 
      <label for="autoSuggest">Term</label> 
      <div class="react-autosuggest__container"> 
       <input type="text" value="" autocomplete="off" role="combobox" aria-autocomplete="list" aria-owns="react-whatever-1" aria-expanded="false" class="react-autosuggest__input" placeholder="Type an ADR Term"></div> 
       <div class="status"></div> 
      </div> 
     </div> 
    <div class="col-xs-12 col-md-2"> 
     <div class="form-group"> 
      <label for="incidence">Incidence</label> 
      <div class="panel panel-default panel-body"> 
        <select class="form-control half-width-form-control" id="incidenceOperator" name="incidenceOperator"> 
        <option value="0" disabled="">Choose Operator</option><option value="1">&lt;</option> 
        <option value="2">≤</option><option selected="" value="3">=</option> 
        <option value="4">≥</option> 
        <option value="5">&gt;</option></select> 
       <input type="text" name="incidence" class="form-control half-width-form-control pull-right"> 
     </div> 
    </div> 
    </div> 
    </div></form> 

とCSS

.half-width-form-control { 
      display: inline-block; 
      width: calc(50% - 2px); 
      float: left; 
      box-sizing: border-box; 
      margin-top: 5px; 
} 

Answer 2

はあなたのパネルの子供たちは、インラインで、選択しないようにしたい、基本的にこの https://jsfiddle.net/virginieLGB/apd1sucL/10/

を試してみてください。

#yourDiv > * { 
    display: inline-block; 
    width: calc(50% - 5px); 
    /*min-width: 200px;*/ /* this is to make it more responsive. If screen is smaller than 400px, they go back to being vertically aligned */ 
} 
#yourDiv select { 
    width: 100%; 
} 

最小幅を使用するかどうかはあなた次第です。私はあなたがするか、代わりにレスポンシブCSSを追加することをお勧めします。