使用水平形式对齐引导文本框

Posted 2023-03-06

【中文标题】使用水平形式对齐引导文本框

【英文标题】：aligning bootstrap text boxes using horizontal form

【发布时间】：2019-01-02 18:48:48

【问题描述】：

我正在处理一个带有多个输入字段的长表单，并且我试图对齐一个水平表单。 第一行有 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>

【问题讨论】：

你能分享你的 HTML 吗？仅以上部分

更新了代码

【参考方案1】：

将text-align: right 样式应用于“中间名”和“城市”列。

【讨论】：

我尝试过使用 ctrl-align-right 与你提到的 css 类，但没有帮助。

【参考方案2】：

问题实际上在第二行，即“街道”和“城市”。

<!-- Your second Row -->
<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>

在 col-md-8 中，配给 col-md-2 和 col-md-10 不等于第一行的 col-md-4，因为与 4 个单元格相比，具有 8 个单元格的列具有更大的面积，这就是为什么 col- md-2 和 col-md-10 未正确对齐。我尝试过，但没有找到现有引导类以及不同布局对齐方式的解决方案。

下面是我对一个自定义 CSS 类“form-group-inline”的小帮助的看法，它只是使“form-group”类变为内联。

<html>
    <head>

        <title>Form Group</title>

        <meta name="viewport" content="width=device-width, initial-scale=1">        
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">                
        <style>     
            .form-group-inline
                display: inline;
                   
        </style>
    </head>
    <body>
        <div class="container" style="margin-top: 100px;">

            <div class="row">
                <div class="form-group form-group-inline">
                    <label class="control-label col-md-1">Label</label>
                    <div class="col-md-3">
                        <input type="text" class="form-control">                        
                    </div>                  
                </div>
                <div class="form-group form-group-inline">
                    <label class="control-label col-md-1">Label</label>
                    <div class="col-md-3">
                        <input type="text" class="form-control">
                    </div>
                </div>
                <div class="form-group form-group-inline">
                    <label class="control-label col-md-1">Label</label>
                    <div class="col-md-3">                              
                        <input type="text" class="form-control">
                    </div>
                </div>
            </div>

            <hr class="divider" />

            <div class="row">
                <div class="form-group form-group-inline">
                    <label class="control-label col-md-1">Label</label>
                    <div class="col-md-7">
                        <input type="text" class="form-control">
                    </div>
                </div>
                <div class="form-group form-group-inline">
                    <label class="control-label col-md-1">Label</label>
                    <div class="col-md-3">                              
                        <input type="text" class="form-control">
                    </div>
                </div>
            </div>

        </div>      
    </body>
</html>

希望对你有帮助

【讨论】：

感谢您的回复。我会试试这个，如果有帮助，我会告诉你。