ASP.NETWebフォームフィールドが正しく配置されていない

debugcn 投稿 Dev

キンヤンジュイカマウ

Bootstrap3.4.1を使用してVS2017を使用してASP.NETWebフォームに作成した次の登録フォームがあります。

しばらく前にBootstrap2で同じコードを使用していましたが、うまく機能しました。

ドロップダウンとボタンは、テキストボックスより少し幅が広くなっています。これを修正するにはどうすればよいですか。

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

キンヤンジュイカマウ

最後に、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;
            }
}