Html bootstrap3中的表单对齐

我在bootstrap 3中有以下HTML，它提供以下显示：

HTML文件如下所示

在一行中，我只有一个字段，而在其他行中，我有3个字段。使用引导是否可以使所有行的位置第一个标签位于同一位置？在这种情况下，项目名称、位置和项目值将与同一位置对齐

谢谢

<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>

在前两个div.row中，使用.col-sm-6创建.form组。如果将其更改为.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>

这里是一个工作演示

编辑：

如果希望前两行为全宽，则需要将.col-sm-4更改为.col-sm-12，并将内部元素更改为.col-sm-1和.col-sm-11类

另外，您不应该在与.col sm-*类相同的div中使用.form group类，因为它会弄乱网格的填充

这是一个固定的代码示例，最后一行还有一些其他更改，以使表单完全对齐

<form class="form-horizontal">
            <div class="row">
                <div class="form-group col-xs-12 col-sm-4">
                    <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-4">
                    <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>

---

若我想让项目名称输入字段跨越所有行呢？嗨，塔索斯，我注意到一件事。当放置在.col-sm-12列中时，带有.col-sm-1的标签不同于放置在.col-sm-4列中带有.col-sm-1的标签，如单行和上面有3列的行。我必须给行中的标签加上3列a.col-sm-3来匹配上面的标签。知道吗？你不能直接在.col-sm-4中添加.col-sm-1。为了使引导网格正常工作，您需要在.col-sm-4中添加一行。检查嵌套列中的文档检查此pls：注意行中的标签有一个字段，行中有三个字段。第一个使用col-md-2，而其他使用col-md-6。就好像在col-md-4行中一样，它按顺序分为12列。这个问题也反映在最后的按钮上，没有与上面的其他控件对齐。10X检查这个。为了解决按钮问题，我将包含按钮的.form组包装成一个.row，然后是一个.col-xs-11.col-md-12，就像处理表单的其余部分一样。