我怎样才能让我的html控件由bootstrap组织起来 [英] How can i make my html control organized by bootstrap

问题描述

 < 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 =textclass =form-controlng-model =model.NewComboItemForSelect/> 
< / div> 
< div class =col-md-5> 
< button type =buttonclass =btn btn-successng-click =AddToDropDownList（）> +< / button> 
< / div> 
< div class =col-md-5> 
< select class =form-controlng-options =field.id as field.value for field in DropdownListCustomItemsng-model =model.DropdownListCustomItem>< / select> 
< / div> 
< / div> 
< / div> 
  

但是结果如此;

我真的很想知道如何将我的html控件移动到美丽的地方。请看红色箭头

解决方案

参考资料

使用下面的代码

 < div class =rowng-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 =textclass =form-controlng-model =model.NewComboItemForSelect/> 
< div class =input-group-btn> 
< button type =buttonclass =btn btn-successng-click =AddToDropDownList（）> +< / button> 
< / div> 
< / div> 
< / div> 
< div class =form-group col-md-6> 
< div class =col-md-5> 
< select class =form-controlng-options =field.id as field.value for field in DropdownListCustomItemsng-model =model.DropdownListCustomItem>< / select> 
< / div> 
< / div> 
  

演示

i try to make my html page some beautifies .My codes are below :

          <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>

But result like that;

i really wander how i can move my html control the beautiful spot. Please look at red arrow

解决方案

Reference

use below code

<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

这篇关于我怎样才能让我的html控件由bootstrap组织起来的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！