ブートストラップの列

Question

にネストされた入力をフィッティング私はこのBootplyに見られるように、ネストされた3つの入力グループを持っている：私はオーバーフローすることなく利用できる列空間内1行に収まらしたい

。どのように私はこれを達成するのですか？

これは上記画像に関連するHTMLである：更新

<form class="form-horizontal"> 
    <div class="row"> 
    <div class="col-sm-10 col-sm-offset-1"> 
     <div class="row form-group form-inline"> 
     <div class="control-group"> 
      <label class="control-label col-lg-3 no-padding-right"><b>Expected Sales:</b></label> 
      <div class="col-lg-6"> 
      <div class="input-group"> 
       <span class="input-group-addon" id="expected-sales-year-1-lbl">2017</span> 
       <input type="text" pattern="[0-9.]+" id="expected-sales-year-1-value" name="expected-sales-year-1-value" placeholder="in Mt/yr"> 
      </div>  
      <div class="input-group"> 
       <span class="input-group-addon" id="expected-sales-year-2-lbl">2018</span> 
       <input type="text" pattern="[0-9.]+" id="expected-sales-year-2-value" name="expected-sales-year-2-value" placeholder="in Mt/yr"> 
      </div> 
      <div class="input-group"> 
       <span class="input-group-addon" id="expected-sales-year-3-lbl">2019</span> 
       <input type="text" pattern="[0-9.]+" id="expected-sales-year-3-value" name="expected-sales-year-3-value" placeholder="in Mt/yr"> 
      </div> 
      </div> 
     </div> 
     </div> 
     <div class="form-group"> 
     <div class="control-group"> 
      <label class="control-label col-lg-3 no-padding-right"><b>Price:</b></label> 
      <div class="col-lg-6"> 
      <div class="input-group"> 
       <span class="input-group-addon"><i class="ace-icon glyphicon glyphicon-euro"></i></span> 
       <input type="text" class="form-control input-control" pattern="[0-9.]+" id="price" name="price" placeholder="in €/kg"> 
      </div> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
</form> 

：行のラッピングこのBootplyのよう入力グループの周りcol-lg-*とdivを追加するには与える：

Answer 1

<div class="form-group form-inline"> 
    <div class="control-group"> 
     <label class="control-label col-lg-3 no-padding-right"><b>Expected Sales:</b></label> 
     <div class="col-lg-6"> 
      <div class="row"> 
       <div class="col-lg-4"> 
        <div class="input-group"> 
         <span class="input-group-addon" id="expected-sales-year-1-lbl"></span> 
         <input type="text" pattern="[0-9.]+" id="expected-sales-year-1-value" name="expected-sales-year-1-value" placeholder="in Mt/yr" /> 
        </div> 
       </div> 
       <div class="col-lg-4"> 
        <div class="input-group"> 
         <span class="input-group-addon" id="expected-sales-year-2-lbl"></span> 
         <input type="text" pattern="[0-9.]+" id="expected-sales-year-2-value" name="expected-sales-year-2-value" placeholder="in Mt/yr" /> 
        </div> 
       </div> 
       <div class="col-lg-4"> 
        <div class="input-group"> 
         <span class="input-group-addon" id="expected-sales-year-3-lbl"></span> 
         <input type="text" pattern="[0-9.]+" id="expected-sales-year-3-value" name="expected-sales-year-3-value" placeholder="in Mt/yr" /> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>