Bootstrap - 在列中拟合嵌套输入

Question

我有三个嵌套的输入组，如Bootply所示：

我希望在可用列空间内的一行上放置而不会溢出。我如何实现这一目标？

这是上图中的相关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>

更新：连续换行并在输入组周围添加col-lg-*的div，如Bootply所示：

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>