html - 使用 Bootstrap 对齐表单中的字段

Question

我正在使用 bootstrap 来设计网页。我有两个主要问题。首先，无法真正弄清楚如何对齐 form 中的字段。其次，调整 form tag< 中的字段(宽度高度等)/。我必须为每个字段使用 css 吗？我试过这样做，但后来对齐变得一团糟。这是我的代码。

            <div class="container">

        <form class="form-inline">

            <div class="form-group">
                <label class="form-control">In Out Specifier</label>
                <select  class="form-control" id="processInOutSpecifier" name="inOutSpecifier" >
                    <option></option>
                </select>
            </div>

            <div class="form-group">
                <label class="form-control" id="callDateLabel">Call Date</label>
                <select  class="form-control" id="callDate" name="callDate" >
                    <option></option>
                </select>
            </div>
            <div class="form-group">
                <label class="form-control" id="processCallDateFormatLabel" >Call Date Format</label>
                <select class="form-control" id="callDate" name="callDateForamt">
                    <option>yyyy-MM-dd</option>
                    <option> yyyy/MM/dd</option>
                    <option> MM-dd-yyyy</option>
                    <option>  MM/dd/yyyy</option>
                    <option> dd-MM-yyyy</option>
                    <option> dd/MM/yyyy</option>
                    <option>dd/MM/yy</option>
                    <option>  MM/dd/yy</option>
                    <option> yyMMdd</option>
                    <option>  MMddyy</option>
                    <option> dd.MM.yy</option>
                    <option> MM.dd.yy</option>
                    <option>MM.dd.yy</option>
                    <option>dd/MM</option>
                    <option>dd-MM</option>
                </select>
            </div>
            <div class="form-group">
                <label class="form-control">Call Time</label>
                <select class ="form-control" id="callTime" name="callTime" >
                    <option></option>
                </select>
            </div>
            <br><br>

            <div class="form-group">
                <label class="form-control" >Call Time Format</label>
                <select id="callTimeFormat" class="form-control" name="CalltimeFormat">
                    <option>HH:MM:SS/12 HOUR</option>
                    <option>HH:MM:SS/24 HOUR</option>
                    <option> HH:MM/12 HOUR</option>
                    <option> HH:MM/24 HOUR</option>
                    <option> HH:MM/AMPM</option>
                    <option>HHMM/24 HOUR</option>
                </select>
            </div>

            <div class="form-group">
                <label class="form-control" >Trunk </label>
                <input class="form-control" type="text" id="processTrunk" placeholder="Trunk">
            </div>
            <div class="form-group">
                <label class="form-control" >Duration </label>
                <input  class="form-control" type="text" id="processDuration" placeholder="Duration">
            </div>                      
        </form>
    </div>

这是 fiddle http://jsfiddle.net/core972/SMkZV/2/

Answer 1

试试这个 fiddle ,

<div class="container">
    <form name="registration_form" id='registration_form' class="form-inline">
        <div class="row">
            <div class="form-group col-xs-6">
                <label for="firstname" class="sr-only"></label>
                <input id="firstname" class="form-control input-group-lg reg_name" type="text" name="firstname" title="Enter first name" placeholder="First name" />
            </div>
        </div>
        <div class="row">
            <div class="form-group col-xs-6">
                <label for="lastname" class="sr-only"></label>
                <input id="lastname" class="form-control input-group-lg reg_name" type="text" name="lastname" title="Enter last name" placeholder="Last name" />
            </div>
        </div>
        <div class="row">
            <div class="form-group col-xs-6">
                <label for="username" class="sr-only"></label>
                <input id="username" class="form-control input-group-lg" type="text" autocapitalize='off' name="username" title="Enter username" placeholder="Username" />
            </div>
        </div>
        <div class="row">
            <div class="form-group col-xs-6">
                <label for="password" class="sr-only"></label>
                <input id="password" class="form-control input-group-lg" type="password" name="password" title="Enter password" placeholder="Password" />
            </div>
        </div>
    </form>
</div>