對齊Bootstrap表單中的嵌入式文本輸入

Question

我正在嘗試在Bootstrap中創建一個表單，並且需要將first name和last name字段內聯，其中表單的其余部分必須保持原樣。

我可以使用內聯功能。 但是，內聯文本字段（名稱）未正確對齊。

在上圖中，我需要將名稱字段的組合寬度與“電話”，“電子郵件”和“密碼”字段相同，這是沒有發生的。 問題是如何使對齊方式起作用 ？

表單的代碼如下：

<form role="form" class="register-form cf-style-1">

<div class="control-group" style="display:inline-block !important; margin-bottom: 25px;">
    <label class="control-label">First Name</label>
    <div class="controls">
    <input type="text" class="le-input" placeholder="First Name" required>
    </div>
</div>

<div class="control-group" style="display:inline-block !important; margin-bottom: 25px;">
    <label class="control-label">Last Name</label>
    <div class="controls">
    <input type="text" class="le-input" placeholder="Last Name" required>
    </div>
</div>

<div class="field-row">
    <label>Phone</label>
    <div class="input-group">
        <div class="input-group-addon">+91</div>
        <input type="text" class="le-input" maxlength="10" placeholder="Phone Number">
    </div>
</div>

<div class="field-row">
    <label>Email</label>
    <input type="email" class="le-input" placeholder="Email Address" required>
</div><!-- /.field-row -->

<div class="field-row">
    <label>Password</label>
    <input type="password" class="le-input" placeholder="Password" required>
</div><!-- /.field-row -->

<div class="buttons-holder">
    <button type="submit" class="le-button huge">Sign Up</button>
</div><!-- /.buttons-holder -->
</form>

Answer 1

如果我們可以看到與此相關的鏈接，則不確定是否必須使用哪個CSS可能會很有用。

但是您可以嘗試將width: 50%名字和姓氏輸入標簽增加width: 50% 。

input {width: 50%;}

我將通過將類添加到要更改的類來定位這些輸入，以免影響其他輸入標簽

Answer 2

您應該能夠刪除內聯塊的樣式。 然后，只需將class col-md-6添加到要並排的每個div中即可。 這將使它們成為中型顯示器的兩列布局，然后它們將在較小的顯示器上排成一行。 您可以在此處閱讀有關列的更多信息： http : //getbootstrap.com/css/#grid

Answer 3

      <div class="control-group">
        <div class="controls form-inline">
            <label for="inputKey">First Name</label>
            <input type="text" class="le-input" placeholder="First Name" required>
            <label for="inputValue">LastName</label>
             <input type="text" class="le-input" placeholder="Last Name" required>
        </div>
    </div>