Meteor:使用bootstrap

时间:2015-09-09 15:49:26

标签: css meteor twitter-bootstrap-3 meteor-autoform

我试图让两个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"}}   

http://plnkr.co/edit/y0v2Xltdfs01wqZS5ZIg

enter image description here

enter image description here

0 个答案:

没有答案