css - 使用水平形式对齐 Bootstrap 文本框

Question

我正在处理一个包含多个输入字段的长表单，我试图对齐一个水平表单。 第一行有 3 个字段 (col-md-4)，第二行有两个字段 (col-md-8 和 col-md-4)。如何让文本框右对齐？

             <div class="row">
                <div class="col-md-12">
                    <div class="col-md-4">
                        <div class="form-group">
                            @Html.LabelFor(m => m.LAST_NAME, htmlAttributes: new { @class = "control-label col-md-4" })
                            <div class="col-md-8">
                                @Html.TextBoxFor(m => m.LAST_NAME, htmlAttributes: new { @class = "form-control" })
                            </div>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="form-group">
                            @Html.LabelFor(m => m.FIRST_NAME, htmlAttributes: new { @class = "control-label col-md-4" })
                            <div class="col-md-8">
                                @Html.TextBoxFor(m => m.FIRST_NAME, htmlAttributes: new { @class = "form-control" })
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            @Html.LabelFor(m => m.MIDDLE_NAME, htmlAttributes: new { @class = "control-label col-md-4" })
                            <div class="col-md-8">
                                @Html.TextBoxFor(m => m.MIDDLE_NAME, htmlAttributes: new { @class = "form-control ctrl-align-right" })
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <hr class="hrcolor" />
            <div class="row">
                <div class="col-md-12">
                    <div class="form-group">
                        <div class="col-md-8">
                            @Html.LabelFor(m => m.STREET, "Street", htmlAttributes: new { @class = "control-label col-md-2" })
                            <div class="col-md-10">
                                @Html.TextBoxFor(m => m.STREET, htmlAttributes: new { @class = "form-control" })
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                @Html.LabelFor(m => m.CITY, htmlAttributes: new { @class = "control-label col-md-4" })
                                <div class="col-md-8">
                                    @Html.TextBoxFor(m => m.CITY, htmlAttributes: new { @class = "form-control" })
                                </div>
                            </div>
                        </div>
                    </div>
                 </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="col-md-4">
                        <div class="form-group">
                            @Html.LabelFor(m => m.STATE, htmlAttributes: new { @class = "control-label col-md-4" })
                            <div class="col-md-8">
                                @Html.TextBoxFor(m => m.STATE, htmlAttributes: new { @class = "form-control" })
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            @Html.LabelFor(m => m.ZIP, htmlAttributes: new { @class = "control-label col-md-4" })
                            <div class="col-md-8">
                                @Html.TextBoxFor(m => m.ZIP, htmlAttributes: new { @class = "form-control" })
                            </div>
                        </div>
                    </div>

                </div>

Answer 1

将 text-align: right 样式应用于“Middle Name”和“City”列。