簡體   English   中英

無法在視圖(ASP.NET MVC)上居中輸入字段

[英]Cannot center input field on View (ASP.NET MVC)

我有這樣的觀點

這是代碼

`<div class="row row-centered">
    <div class="col-md-8  " style="width: 1100px; ">
        <section id="loginForm">
            @using (Html.BeginForm("AdminLogin", "Account", new { ReturnUrl = ViewBag.ReturnUrl }, FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
            {
                @Html.AntiForgeryToken()

                <hr />
                @Html.ValidationSummary(true, "", new { @class = "text-danger" })
                <div class="form-group" style="text-align: center">

                        @Html.TextBoxFor(m => m.Email, new { @class = "form-control", placeholder = "Email" })
                        @Html.ValidationMessageFor(m => m.Email, "", new { @class = "text-danger" })

                </div>
                <div class="form-group" style="text-align: center">

                        @Html.PasswordFor(m => m.Password, new { @class = "form-control", placeholder = "Пароль" })
                        @Html.ValidationMessageFor(m => m.Password, "", new { @class = "text-danger" })
                </div>
                <div class="form-group" style="text-align: center" >

                        <div class="checkbox">
                            @Html.CheckBoxFor(m => m.RememberMe)
                            @Html.LabelFor(m => m.RememberMe)
                        </div>
                </div>
                <div class="form-group" style="padding-top: 15px;text-align: center;">
                    <input type="submit" value="Войти" class="btn btn-default" style="width: 200px;" />
                </div>

                <div  style="width: 100%;text-align: center;">
                    <section id="socialLoginForm">
                        @Html.Partial("_ExternalLoginsListPartial", new ExternalLoginListViewModel { ReturnUrl = ViewBag.ReturnUrl })
                    </section>
                </div>
            }
        </section>
    </div>

</div>`

在本地服務器上都可以

這是屏幕

在此處輸入圖片說明

但是當我上傳到服務器時

看起來像這樣

在此處輸入圖片說明

我不明白為什么會這樣,因為我沒有更改代碼?

更新

這是生成的HTML代碼

 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Логин - Видео Интервью</title> <script async type='text/javascript'> var appInsights=window.appInsights||function(config) { function r(config){ t[config] = function(){ var i = arguments; t.queue.push(function(){ t[config].apply(t, i)})} } var t = { config:config},u=document,e=window,o='script',s=u.createElement(o),i,f;for(s.src=config.url||'//az416426.vo.msecnd.net/scripts/a/ai.0.js',u.getElementsByTagName(o)[0].parentNode.appendChild(s),t.cookie=u.cookie,t.queue=[],i=['Event','Exception','Metric','PageView','Trace','Ajax'];i.length;)r('track'+i.pop());return r('setAuthenticatedUserContext'),r('clearAuthenticatedUserContext'),config.disableExceptionTracking||(i='onerror',r('_'+i),f=e[i],e[i]=function(config, r, u, e, o) { var s = f && f(config, r, u, e, o); return s !== !0 && t['_' + i](config, r, u, e, o),s}),t }({ instrumentationKey:'a6c64876-3925-4b06-a0a7-fe91f4d5929a' }); window.appInsights=appInsights; appInsights.trackPageView(); </script> </head> <body> <div style="padding-left: 70px;"> <p> <a href="/"> <img src="/images/logo.png" alt="image" height="120px" width="120px"> </a> </p> </div> <div class="navbar "> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav" id="test12"> <li ><a href="/Home/Contact">О нас</a></li> <li ><a href="/Home/Contact">Контакты</a></li> </ul> <ul class="nav navbar-nav"> <li><a href="/Account/Register" id="registerLink">Регистрация</a></li> <li><a href="/Role" id="loginLink">Логин</a></li> </ul> </div> </div> </div> <div class="container body-content"> <h2 class="registrationclass" style="text-align: center">Логин</h2> <div style="width: 160px; border: 6px solid #ffcf00;; margin: 0 auto;"> </div> <div class="row row-centered"> <div class="col-md-8 " style="width: 1100px; "> <section id="loginForm"> <form action="/Account/AdminLogin" class="form-horizontal" method="post" role="form"><input name="__RequestVerificationToken" type="hidden" value="tP-rTMzcQ_Ik5buMcYjOdondv1_hIrxeLjOgG_e3xQt9M90R90iDNqItSaCLrmed6KvPIBqJQK0ZJ9w4wIl2EcR7Vc6x0VJ1VnYxCnMxNx81" /> <hr /> <div class="form-group" style="text-align: center"> <input class="form-control" data-val="true" data-val-email="The Email field is not a valid e-mail address." data-val-required="The Email field is required." id="Email" name="Email" placeholder="Email" type="text" value="" /> <span class="field-validation-valid text-danger" data-valmsg-for="Email" data-valmsg-replace="true"></span> </div> <div class="form-group" style="text-align: center"> <input class="form-control" data-val="true" data-val-required="The Пароль field is required." id="Password" name="Password" placeholder="Пароль" type="password" /> <span class="field-validation-valid text-danger" data-valmsg-for="Password" data-valmsg-replace="true"></span> </div> <div class="form-group" style="text-align: center" > <div class="checkbox"> <input data-val="true" data-val-required="The Запомнить меня? field is required." id="RememberMe" name="RememberMe" type="checkbox" value="true" /><input name="RememberMe" type="hidden" value="false" /> <label for="RememberMe">Запомнить меня?</label> </div> </div> <div class="form-group" style="padding-top: 15px;text-align: center;"> <input type="submit" value="Войти" class="btn btn-default" style="width: 200px;" /> </div> <div style="width: 100%;text-align: center;"> <section id="socialLoginForm"> <hr /> <form action="/Account/ExternalLogin" method="post"> <div id="socialLoginList"> <p> <button type="submit" class="zocial google" style="height: 35px; font-size: 16px;width: 180px;" id="Google" name="provider" value="Google" title="Log in using your Google account"> Google </button> <button type="submit" class="zocial facebook" style="height: 35px; font-size: 16px;width: 180px;" id="Facebook" name="provider" value="Facebook" title="Log in using your Facebook account"> Facebook </button> </p> </div> </form> </section> </div> </form> </section> </div> </div> <hr/> <footer> <p>&copy; 2017 - Smart Solutions</p> </footer> </div> <script src="/bundles/jquery?v=DilzeZuJxdbQsfc_JOwsWB4VFDhTPM73urYeggaKdL81"></script> <script src="/bundles/bootstrap?v=-g7cxTWQV6ve_iRyKtg7LoBytQltgj_w8zTNeaLaBc41"></script> <link href="/Content/css?v=fYPwGViDmt6y-kpdK5MUhO65n_wno8NoVjnSj7kvIxA1" rel="stylesheet"/> <script src="/bundles/modernizr?v=inCVuEFe6J4Q07A0AcRsbJic_UE5MwpRMNGcOtk94TE1"></script> <script src="/bundles/jqueryval?v=WhRmI8vUVF186UwYB1zRP7-DwJzqpKlt0JksOBJvolw1"></script> </body> </html> 

就在你的CSS集中

.form-group input{display:inline-block};

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM