在Bootstrap Form中对齐内联文本输入

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%添加到名字和姓氏输入标签。

input {width: 50%;}

我会通过向要更改的类添加类来定位这些输入，以免影响其他输入标记

Answer 2

您应该能够删除内联块的样式。然后只需将类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>