小编Red*_*nds的帖子

使用Bootstrap混合表单内联和水平样式来填充字段

我有一个带有一些表单内联部分的表单,如下图和演示所示。

问题:我希望字段行在右侧对齐,就像它们在左侧那样。我无法确定是什么限制了它们(第一,最后,电子邮件,确认电子邮件)的宽度或如何使它们使用全部空间。

注意:我已经复习了许多问题,但没有解决此特定问题。例如。引导程序形式组,混合内联和水平样式。在其他示例中。

在此处输入图片说明

演示:http//plnkr.co/edit/ImNP7IftPdk3sBDmJewe?p = preview

    <div class="col-md-12">
        <div class="form-group">
            <div class="row">
                <div class="col-md-6">
                    <label class="control-label" for="first_name">Name</label>
                    <div class="form-inline form-group">
                        <input id="first_name" type="text" class="contactInput form-control" name="first_name" placeholder="First">
                        <input id="last_name" type="text" class="contactInput form-control" name="last_name" placeholder="Last">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <label for="email">Email</label>
                    <div class="form-inline form-group">
                        <input id="email" type="email" class="contactInput form-control"  name="email" placeholder="Email">
                        <input id="confirm_email" type="email" class="contactInput form-control"  name="confirm_email" placeholder="Confirm Email">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="phone_number">Phone</label>
                        <input id="phone_number" type="phoneUS" …
Run Code Online (Sandbox Code Playgroud)

forms twitter-bootstrap

1
推荐指数
1
解决办法
1991
查看次数

标签 统计

forms ×1

twitter-bootstrap ×1