html - bootstrap 3 中的表单对齐

Question

我在 bootstrap 3 中有以下 HTML，显示如下:

HTML 如下。

在一行中，我只有一个字段，而在其他行中，我有 3 个字段。是否可以使用 bootstrap 使所有行的位置“第一”标签位于同一位置？在这种情况下，“元素名称”、“位置”和“元素值(value)”将对齐相同的位置。

谢谢

<div class="container">
    <div class="row" id="mainForm">
         <form class="form-horizontal">
                <div class="row">
                    <div class="form-group col-xs-12 col-sm-6">
                        <label for="txtProjectName" class="control-label col-sm-4 col-xs-3">Project Name</label>
                        <div class="col-sm-8 col-xs-9">
                            <input type="text" class="form-control" id="txtProjectName" placeholder="Name of Project">
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group col-xs-12 col-sm-6">
                        <label for="txtLocation" class="control-label col-sm-4 col-xs-3">Location</label>
                        <div class="col-sm-8 col-xs-9">
                            <input type="text" class="form-control" id="txtLocation" placeholder="Location">
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group col-xs-12 col-sm-4">
                        <label for="txtProjectValue" class="control-label col-sm-4 col-xs-3">Project Value</label>
                        <div class="col-sm-8 col-xs-9">
                            <input type="text" class="form-control" id="txtprojectValueUsd" placeholder="Project Value (US $)">
                        </div>
                    </div>
                    <div class="form-group col-xs-12 col-sm-4">
                        <label for="txtCCCValue" class="control-label col-sm-4 col-xs-3">CCC Value</label>
                        <div class="col-sm-8 col-xs-9">
                            <input type="text" class="form-control" id="txtCCCValue" placeholder="CCC Value (US $)">
                        </div>
                    </div>
                    <div class="form-group col-xs-12 col-sm-4">
                        <label for="txtProjectValueLocal" class="control-label col-sm-4 col-xs-3">Project Value Local</label>
                        <div class="col-sm-8 col-xs-9">
                            <input type="text" class="form-control" id="txtProjectValueLocal" placeholder="Project Value Local Currency">
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-xs-offset-2 col-xs-10">
                        <button type="submit" class="btn btn-primary">Login</button>
                    </div>
                </div>
            </form>
    </div>
    <div class="row top-buffer">
    </div>
</div>

Answer 1

在前两个 div.row 中，您使用 .form-group 和 .col-sm-6。如果将其更改为 .col-sm-4，您将获得所需的对齐方式。

例如:

<div class="col-xs-12 col-sm-4">
    <div class="form-group">
        <label for="txtProjectName" class="control-label col-sm-4 col-xs-3">Project Name</label>
        <div class="col-sm-8 col-xs-9">
        <input type="text" class="form-control" id="txtProjectName" placeholder="Name of Project">
        </div>        
    </div>
</div>

这是一个工作演示 http://jsfiddle.net/wmyuj7gy/ .

编辑:

如果您希望前两行是全宽的，您需要将 .col-sm-4 更改为 .col-sm-12 和内部元素拥有 .col-sm-1 和 .col-sm-11 类。

另外，你不应该在同一个 div 中使用 .form-group 类和 .col-sm-* 类，因为与网格的填充混淆。

这是您的代码的一个固定示例，在最后一行还进行了一些其他更改以使表单完全对齐 http://jsfiddle.net/wmyuj7gy/3/