我试图让两个afQuickField文本字段显示在同一行和我见过的任何一个例子中,这里不是很多,我不能让它们看起来正确。我有一个客户表单,它有地址等。我试图让Suite fiel和City字段在同一行显示内联。我也试图将State和Zip字段放在同一行。
如果我将引导网格设置为col-md-6,那么我可以完成此操作,以便此表单位于页面的一半。这将是内联的,但它们不会是col的全宽,因为所有其他文本字段都是,它看起来很有趣。但我真正想要的是这个表格在col-md-4中。当我这样做时,它将这两个分开,并将它们放在单独的行上,但同样也不像其他文本字段那样全长。我在这里附上两张照片。
我正在寻找的是让这两个字段的阵容与周围的其他字段的宽度相同,这样它们就不会像拇指一样突出。
我附上了我的html文档的plnkr,并粘贴了下面适用的代码。
{{#autoForm collection="customers" id="insertCustomer" type="insert"}}
<div class="row customerForm">
<div class="col-md-4 rcorners">
<!-- ************************************************
***** Customer Name and address fields ***********
************************************************ -->
{{> afQuickField name='customerName' template="bootstrap3-horizontal"
input-col-class="col-sm-12 padL-0" label-class="sr-only"
afFieldInput-placeholder="schemaLabel"}}
{{> afQuickField name='customerAddress' template="bootstrap3-horizontal"
input-col-class="col-sm-12 padL-0" label-class="sr-only"
afFieldInput-placeholder="schemaLabel"}}
<div class="form-inline">
{{> afQuickField name='customerSuite'
template="bootstrap3-inline" label-class="sr-only"
afFieldInput-placeholder="schemaLabel"}}
{{> afQuickField name='customerCity'
template="bootstrap3-inline" label-class="sr-only"
afFieldInput-placeholder="schemaLabel"}}
</div>
<div class="form-inline">
{{> afQuickField name='customerState'
template="bootstrap3-inline" label-class="sr-only"
afFieldInput-placeholder="schemaLabel"}}
{{> afQuickField name='customerZip'
template="bootstrap3-inline" label-class="sr-only"
afFieldInput-placeholder="schemaLabel"}}
</div>
{{> afQuickField name='customerPhone1' template="bootstrap3-horizontal"
input-col-class="col-sm-12 padL-0" label-class="sr-only"
afFieldInput-placeholder="schemaLabel"}}