我怎样才能让我的HTML控件通过引导

Question

我尽量让我的html页面的一些美化有组织的。我的代码如下所示：

  <div class="row" ng-if="model.FieldType == customTypes.Select"> 
         <div class="form-group"> 
          <label class="control-label col-md-4">Seçim</label> 
          <div class="col-md-5"> 
            <input type="text" class="form-control" ng-model="model.NewComboItemForSelect" /> 
           </div> 
           <div class="col-md-5"> 
            <button type="button" class="btn btn-success" ng-click="AddToDropDownList()">+</button> 
            </div> 
          <div class="col-md-5"> 
           <select class="form-control" ng-options="field.id as field.value for field in DropdownListCustomItems" ng-model="model.DropdownListCustomItem"></select> 
           </div> 
          </div> 
         </div> 

，反而会导致这样的;

我真的徘徊如何我可以将我的html控件移动到美丽的地方。请看红色箭头

Answer 1

Reference

使用下面的代码

<div class="row" ng-if="model.FieldType == customTypes.Select"> 
<div class="form-group col-md-12"> 
    <label class="control-label col-md-4">Seçim</label> 
    <div class=" input-group col-md-8"> 
     <input type="text" class="form-control" ng-model="model.NewComboItemForSelect" /> 
     <div class="input-group-btn"> 
      <button type="button" class="btn btn-success" ng-click="AddToDropDownList()">+</button> 
     </div> 
    </div> 
</div> 
<div class="form-group col-md-6"> 
    <div class="col-md-5"> 
     <select class="form-control" ng-options="field.id as field.value for field in DropdownListCustomItems" ng-model="model.DropdownListCustomItem"></select> 
    </div> 
</div> 

Demo