对齐Bootstrap表单中的嵌入式文本输入

高拉夫·瓦德瓦尼（Gaurav Wadhwani）

我正在尝试在Bootstrap中创建一个表单，并且需要first nameandlast 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>

史蒂夫

您应该能够删除内联块的样式。然后，只需将class col-md-6添加到要并排的每个div中即可。这将使它们成为中型显示器的两列布局，然后它们将在较小的显示器上排成一行。您可以在此处阅读有关列的更多信息：http : //getbootstrap.com/css/#grid

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。