Problèmes de conception de formulaire de connexion dans ASP MVC

J'ai un code de formulaire de connexion dans un programme ASP MVC. J'ai deux problèmes. 1) Le formulaire de connexion n'est pas centré. 2) les contrôles de formulaire ne sont pas centrés dans le formulaire de connexion. J'ai remarqué quand j'ai mis des frontières pour les divs de groupe de forme ils sont au centre et aussi j'ai mis la frontière pour Ils ont mis au milieu aussi. mais je ne sais pas pourquoi les boîtes de texte ne s'affichent pas au milieu de la forme.Problèmes de conception de formulaire de connexion dans ASP MVC

<div class="row"> 
<div class="col-md-4 col-md-offset-4 shadow" style="background-color:#0375b4;"> 

     <section id="loginForm"> 

       @using (Html.BeginForm("Login", "Account", new { ReturnUrl = ViewBag.ReturnUrl }, FormMethod.Post, new { @class = "form-horizontal", role = "form" })) 
     { 
        @Html.AntiForgeryToken() 
        @Html.ValidationSummary(true, "", new { @class = "text-danger" }) 

        <div class="col-md-12" style="margin-top:0.75cm"> 
         <img class="profile-img" src="~/Content/Images/avatar1.png" /> 
        </div> 

        <div class="form-group"> 
         <div class="col-md-12"> 
          @Html.LabelFor(m => m.Email, new { @class = "control-label", style = "color:white;" }) 
         </div> 
        </div> 

        <div class="form-group "> 
         <div class="col-md-12 "> 
          @Html.TextBoxFor(m => m.Email, new { @class = "form-control ", @style = "text-align:left" }) 
          @Html.ValidationMessageFor(m => m.Email, "", new { @class = "text-danger" }) 
         </div> 
        </div> 


        <div class="form-group"> 
         <div class="col-md-12"> 
          @Html.LabelFor(m => m.Password, new { @class = "control-label", style = "color:white;" }) 
         </div> 
        </div> 


        <div class="form-group"> 
         <div class="col-md-12"> 
          @Html.PasswordFor(m => m.Password, new { @class = "form-control", @style = "text-align:left" }) 
          @Html.ValidationMessageFor(m => m.Password, "", new { @class = "text-danger" }) 
         </div> 
        </div> 

        <div class="form-group"> 
         <div class="col-md-12"> 
          <div class="checkbox"> 
           @Html.CheckBoxFor(m => m.RememberMe) 
           @Html.LabelFor(m => m.RememberMe, new { style = "color:white;" }) 
          </div> 
         </div> 
        </div> 


         <div class="form-group"> 
          <div class="col-md-12"> 
           <input type="submit" value="Submit" class="btn btn-primary btn-block" /> 
          </div> 
         </div> 


       } 

       <div style="height:20px"> 

       </div>

Source

2017-05-10 bz.morvarid

Je résous centraliser des contrôles de forme en définissant une classe dans bootstrap comme suit: –

Créer suivant classe css

div.centered { 
    margin: 0 auto; 
    width: 800px; 
}

Et mettez-le à votre division conteneur.

Source

2017-05-10 08:04:44

@Hossuam Hamdan Merci pour votre réponse. bien que j'ai vu la même réponse pour une question mais votre réponse a causé je pense plus profond et au moins résoudre un de mon problème. –

je résous la centralisation des formulaires-contrôles en ajoutant une classe bootstrap.css comme suit:

.center_div{ 
     margin: 0 auto; 
      width:80% /* value of your choice which suits your alignment */ 
    }

puis-je utiliser cette classe sous forme de connexion vue

<section id="loginForm" class="center_div">

et contrôles de formulaire mis au milieu de la forme

Source

2017-05-10 08:36:25

Problèmes de conception de formulaire de connexion dans ASP MVC

Répondre

Questions connexes