Bootstrap：复选框和文本框的大小不匹配

Question

我有一个与文本框关联的复选框（该复选框将启用/禁用文本框）。我已经使用引导程序来设置其中两个样式，但文本框并不像复选框周围的灰色框那样垂直大（如附带的屏幕截图所示）

我的代码如下：

                   <div class="row">
                        <div class="col-md-3">
                            @Html.LabelForConfig(model => model.PushRetroActivityDays)
                        </div>
                        <div class="col-md-9">
                            <div class="input-group">
                                <span class="input-group-addon">
                                    @Html.CheckBoxFor(model => model.IsRetroActivityDaysForPush)
                                </span>
                                @Html.EditorFor(model => model.PushRetroActivityDays)

                            </div><!-- /input-group -->
                        </div><!-- /.col-md-9 -->
                    </div>

如何使两者匹配（理想情况下我希望文本框垂直放大而不是缩小复选框周围的灰色框）

Answer 1

像这样...... DEMO

<form class="form-inline">
  <div class="form-group">
    <div class="row">
      <div class="col-lg-6">
        <label for="exampleInputName2">Name</label>
          <div class="input-group">
           <span class="input-group-addon">
           <input type="checkbox" aria-label="..."/>
           </span>
           <input type="text" class="form-control" aria-label="..."/>
          </div>
      </div>
     </div>
    </div>
   </form>