ASP.NET 网络表单字段未正确对齐

Posted 2023-03-06

【中文标题】ASP.NET 网络表单字段未正确对齐

【英文标题】：ASP.NET webforms fields not aligning properly

【发布时间】：2019-12-28 03:05:21

【问题描述】：

我有以下注册表单，我使用 VS 2017 使用 Bootstrap 3.4.1 在 ASP.NET 网络表单中构建。

前段时间我在 Bootstrap 2 上使用过相同的代码，效果很好：

下拉菜单和按钮比文本框宽一点。我该如何解决这个问题。

Register.aspx 的代码

<div class="col-sm-5 col-xs-5">
            <div class="col-xs-12">
                <h4>Create a new account</h4>
                <hr />

                <div class="input-group">
                    <span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span>
                    <asp:DropDownList runat="server" ID="UserName" CssClass="form-control" TextMode="UserName" placeholder="UserName" />
                </div>
                <asp:RequiredFieldValidator runat="server" ControlToValidate="UserName" Display="Dynamic"
                    CssClass="text-danger" ErrorMessage="The UserName field is required." />

                <div class="input-group">
                    <span class="input-group-addon"><span class="glyphicon glyphicon-star-empty"></span></span>
                    <asp:TextBox runat="server" ID="Password" TextMode="Password" CssClass="form-control" placeholder="Password" />
                </div>
                <asp:RequiredFieldValidator runat="server" ControlToValidate="Password" Display="Dynamic"
                    CssClass="text-danger" ErrorMessage="The password field is required." />

                <div class="input-group">
                    <span class="input-group-addon"><span class="glyphicon glyphicon-star"></span></span>
                    <asp:TextBox runat="server" ID="ConfirmPassword" TextMode="Password" CssClass="form-control" placeholder="Confirm Password" />
                </div>
                <asp:RequiredFieldValidator runat="server" ControlToValidate="ConfirmPassword"
                    CssClass="text-danger" Display="Dynamic" ErrorMessage="The confirm password field is required." />
                <asp:CompareValidator runat="server" ControlToCompare="Password" ControlToValidate="ConfirmPassword"
                    CssClass="text-danger" Display="Dynamic" ErrorMessage="The password and confirmation password do not match." />

                <div class="input-group">
                    <span class="input-group-addon"><span class="glyphicon glyphicon-phone-alt"></span></span>
                    <asp:TextBox runat="server" ID="PhoneNumber" TextMode="SingleLine " CssClass="form-control" placeholder="Phone Number" />
                </div>
                <asp:RequiredFieldValidator runat="server" ControlToValidate="PhoneNumber" Display="Dynamic"
                    CssClass="text-danger" ErrorMessage="The phone number field is required." />

                <div class="form-group">
                    <asp:Button runat="server" OnClick="CreateUser_Click" Text="Register" CssClass="btn btn-block btn-default" />
                </div>

                <div class="form-group">
                    <p>
                        By clicking on "Register", you agree to the <a data-toggle="modal" href="#termsOfUseModal">Terms of Use</a> and the 
                        <a data-toggle="modal" href="#privacyModal">Privacy Policy</a>.
                    </p>
                </div>

                <asp:PlaceHolder runat="server" ID="DisplayEmail" Visible="false">
                    <p class="text-info">
                        Please check your email and confirm your email address.
                    </p>
                </asp:PlaceHolder>
            </div>
        </div>

【问题讨论】：

我将您的标记放在使用 3.3.7 的页面上，没有问题。有一个人们可以查看的工作示例是一个好主意（？）。如果允许的话，在某个地方的测试页。

看起来所有的 glyphicon spans 都关闭了两次。

与 3.3.7 相同的问题。如果没有 2 个跨度，事情就会出错。就像我说的，它在几年前与旧版本的 Bootstrap 一起工作。

docs for Bootstrap 3 input group 表示 “通过在任何基于文本的<input> 之前、之后或两侧添加文本或按钮来扩展表单控件”。然后它继续说“避免对输入组使用<select>”元素。看起来 Bootstrap 3 不支持 .input-group 中的 <select>，这是您遇到奇怪样式的方式

zgood，我应该如何重新设计上面的样式？

【参考方案1】：

最后通过在 Site.css 中添加此代码来修复它。

/* Move down content because we have a fixed navbar that is 50px tall */
body 
    padding-top: 50px;
    padding-bottom: 20px;


/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content 
    padding-left: 15px;
    padding-right: 15px;


/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) 
    .jumbotron 
        margin-top: 20px;
    

    .body-content 
        padding: 0;
    


/* make sidebar nav vertical */
@media (min-width: 768px) 
    .sidebar-nav 
        margin-top: 20px;
    

        .sidebar-nav .navbar .navbar-collapse 
            padding: 0;
            max-height: none;
        

        .sidebar-nav .navbar ul 
            float: none;
        

            .sidebar-nav .navbar ul:not(.dropdown-menu) 
                display: block;
            

        .sidebar-nav .navbar li 
            float: none;
            display: block;
        

            .sidebar-nav .navbar li a 
                padding-top: 12px;
                padding-bottom: 12px;