英文:
how to make the total form fields into two column using Angular and bootstrap
问题
以下是您提供的代码的翻译：
我在Bootstrap模态框中有一个Angular表单，我希望所有字段都分成两列，但根据我的代码，它没有生成预期的输出。我将解释我的代码如下。
<div id="myCouponModal" class="modal fade">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<div class="icon-box">
<i class="material-icons"></i>
</div>
<h4 class="modal-title">优惠券</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<!-- div starts -->
<form class="form-inline" role="form">
<div>
<div class="section">
<div class="help-content">
<h5>优惠码：HOLI123</h5>
</div>
<div class="form-content">
<div class="form-field">
<mat-form-field appearance="outline">
<mat-label>规则名称</mat-label>
<input matInput placeholder="规则名称" #RuleName required>
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>优惠券代码</mat-label>
<input matInput placeholder="优惠券代码"
#CouponCode maxlength="30" pattern="[a-zA-Z0-9]+" (keyup)="makeCaps($event)" required>
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>优惠券类别</mat-label>
<select matNativeControl required (change)="getItemsAsPerCategory($event)" #CouponCategory>
<option value="">选择优惠券类别</option>
<option value=Product>产品</option>
<option value=Store>商店</option>
<!-- <option value=Category>类别</option> -->
</select>
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>优惠券价值</mat-label>
<input matInput placeholder="优惠券价值"
#CouponValue maxlength="15" pattern="[0-9]+" required>
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>开始日期</mat-label>
<input matInput [matDatepicker]="picker" placeholder="mm/dd/yyyy" readonly>
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>最低购物车价值</mat-label>
<input matInput placeholder="最低购物车价值"
#maxDisValue maxlength="15" pattern="[0-9]+" required>
</mat-form-field>
</div>
<div class="form-field">
<mat-form-field appearance="outline">
<mat-label>优惠券类型</mat-label>
<select matNativeControl required #Type>
<option value="">选择优惠券类型</option>
<option value=Flat>固定金额</option>
<option value=percentage>百分比</option>
</select>
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>优惠券数量</mat-label>
<input matInput placeholder="优惠券数量"
#Count maxlength="15" pattern="[0-9]+" required>
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>优惠券描述</mat-label>
<input matInput placeholder="优惠券描述" #CouponDescription required>
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>最大折扣值</mat-label>
<input matInput placeholder="最大折扣值"
#maxDisValue maxlength="15" pattern="[0-9]+" required>
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>结束日期</mat-label>
<input matInput [matDatepicker]="picker1" placeholder="mm/dd/yyyy" readonly>
<mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
<mat-datepicker #picker1></mat-datepicker>
</mat-form-field>
</div>
</div>
</div>
</div>
</form>
<!-- div starts -->
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-info" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-danger" (click)="deleteProductItem()">删除</button>
</div>
</div>
</div>
</div>
在这里，我有一些带有部分标题的字段，根据这个代码，它们都在同一列中显示。我需要将部分标题放在左侧，右侧的所有字段分成两列。
英文:
I have a angular form inside bootstrap modal and i need all the fields will be devided into two columns but as per my code its not generating the output as expected. I am explaining my code below.
<div id="myCouponModal" class="modal fade">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<div class="icon-box">
<i class="material-icons">&#xE5CD;</i>
</div>
<h4 class="modal-title">Coupons</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<!-- div starts -->
<form class="form-inline" role="form">
<div>
<div class="section">
<div class="help-content">
<h5>Coupon code: HOLI123</h5>
</div>
<div class="form-content">
<div class="form-field">
<mat-form-field appearance="outline">
<mat-label>Rule Name</mat-label>
<input matInput placeholder="Rule Name" #RuleName required>
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>Coupon Code</mat-label>
<input matInput placeholder="Coupon Code"
#CouponCode maxlength="30" pattern="[a-zA-Z0-9]+" (keyup)="makeCaps($event)" required>
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>Coupon Category</mat-label>
<select matNativeControl required (change)="getItemsAsPerCategory($event)" #CouponCategory>
<option value="">Select Coupon Category</option>
<option value=Product>Product</option>
<option value=Store>Store</option>
<!--<option value=Category>Category</option> -->
</select>
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>Coupon Value</mat-label>
<input matInput placeholder="Coupon Value"
#CouponValue maxlength="15" pattern="[0-9]+" required>
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>Start Date</mat-label>
<input matInput [matDatepicker]="picker" placeholder="mm/dd/yyyy" readonly>
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>Min Cart Value</mat-label>
<input matInput placeholder="Min Cart Value"
#maxDisValue maxlength="15" pattern="[0-9]+" required>
</mat-form-field>
</div>
<div class="form-field">
<mat-form-field appearance="outline">
<mat-label>Coupon Type</mat-label>
<select matNativeControl required #Type>
<option value="">Select Coupon Type</option>
<option value=Flat>Flat</option>
<option value=percentage>Percentage</option>
</select>
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>Coupon Count</mat-label>
<input matInput placeholder="Coupon Count"
#Count maxlength="15" pattern="[0-9]+" required>
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>Coupon Description</mat-label>
<input matInput placeholder="Coupon Description" #CouponDescription required>
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>Max Discount Value</mat-label>
<input matInput placeholder="Max Discount Value"
#maxDisValue maxlength="15" pattern="[0-9]+" required>
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>End Date</mat-label>
<input matInput [matDatepicker]="picker1" placeholder="mm/dd/yyyy" readonly>
<mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
<mat-datepicker #picker1></mat-datepicker>
</mat-form-field>
</div>
</div>
</div>
</div>
</form>
<!-- div starts -->
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-info" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-danger" (click)="deleteProductItem()">Delete</button>
</div>
</div>
</div>
</div>
Here I have some fields with section header and as per this code its coming like the below image.
Here all fields are coming in same column. I need the section header should place left and in right section all the fields will be divided into two columns.
答案1
得分: 3
你需要将你的表单分成两列。
<div class="row">
<div class="col-md-6">
左侧字段
</div>
<div class="col-md-6">
右侧字段
</div>
</div>
英文:
You need to split your form in two columns
div class = row
div class col-md-6
your left fields
div class col-md-6
your rights fields
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论