Wie Login-Formular nicht ganze Breite des Bildschirms passen

Question

Ich erstellte ein Login-Formular, das derzeit die gesamte Breite des Bildschirms passt. Ich habe versucht, die Formenbreite kleiner zu machen, indem ich Breite verwendete: 50%, die die Form perfekt maß, aber die Form an der linken Seite des Bildschirms klebte. Wie würde ich die Größe der Formulare ändern, während ich sie zentriert und reaktionsfähig mache? Gibt es einfach ein Attribut, von dem ich nichts weiß?

html, 
 
body { 
 
    height:100%; 
 
    font-family: 'Alegreya Sans', sans-serif; 
 
} 
 

 
#header { 
 
    background:linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('../img/hero.jpeg') center center no-repeat; 
 
    background-size:cover; 
 
    height:100%; 
 
    color:white; 
 
    display:flex; 
 
    align-items:center; 
 
} 
 

 
#header h1 { 
 
    text-align: center; 
 
    font-family: 'Raleway', sans-serif; 
 
    font-size: 500%; 
 
    font-weight: 300; 
 
} 
 

 
#header h3 { 
 
    text-align: center; 
 
    font-family: 'Raleway', sans-serif; 
 
    font-size: 200%; 
 
    font-weight: 100; 
 
} 
 

 
.login { 
 
    background-color:rgba(0,0,0,0.5); 
 
    padding:30px; 
 
    border-radius:10px; 
 
}

<section id="header"> 
 
    <div class="col-sm-12 login"> 
 
    <h1>Apple ID</h1> 
 
    <h3>Manage your Apple account</h3> 
 
    <form> 
 
     <fieldset class="form-group"> 
 
     <label class="sr-only">Apple ID</label> 
 
     <input type="email" class="form-control" placeholder="Apple ID"> 
 
     </fieldset> 
 
     <fieldset class="form-group"> 
 
     <label class="sr-only">Password</label> 
 
     <input type="password" class="form-control" placeholder="Password"> 
 
     </fieldset> 
 
     <button type="submit" class="btn btn-outline-info btn-block">login</button> 
 
    </form> 
 
    </div> 
 
</section>

Answer 1

Sie Bootstrap des Grid-Klassen entsprechend der Breite der Bildschirme verwenden können.

tun:

<div class="login col-xs-12 col-xs-offset-0 col-sm-6 col-sm-offset-3"> 

Statt:

<div class="col-sm-12 login"> 

Sie vielleicht einen Blick auf die Bootstrap Grids haben. Hoffe das hilft!

Answer 2

versuchen, diese

demo

css

html, 
     body { 
      height:100%; 
      font-family: 'Alegreya Sans', sans-serif; 
     } 

     #header { 
      background:linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('../img/hero.jpeg') center center no-repeat; 
      background-size:cover; 
      /* height:100%;*/ 
      color:white; 
      display:flex; 
      align-items:center; 
     } 

     #header h1 { 
      text-align: center; 
      font-family: 'Raleway', sans-serif; 
      font-size: 500%; 
      font-weight: 300; 
     } 

     #header h3 { 
      text-align: center; 
      font-family: 'Raleway', sans-serif; 
      font-size: 200%; 
      font-weight: 100; 
     } 

     .login { 
      background-color:rgba(0,0,0,0.5); 
      padding:30px; 
      border-radius:10px; 
      margin:0 auto; 
     } 

Answer 3

Wenn Sie nach den Klassennamen suchen, sieht es so aus, als würden Sie Bootstrap als Ihr Framework verwenden.

<div class="col-sm-12 login"> setzt das Anmeldeformular für die gesamte Breite des Bildschirms (Bootstrap arbeitet auf einem Grid-System von 12)

Ändern Sie die div Klasse <div class="col-sm-6 col-sm-offset-3 login"> und dies wird ein Login-Formular erstellen, das 6-Säule breit ist (50% der Breite des Containers), von links um 3 Spalten versetzt (25% der Breite des Containers). Passen Sie diese Werte an.

Answer 4

Sie mit Raster des Bootstrap und Sie setzen col Nummer 12 hier: <div class="col-sm-12 login"> es die Breite macht dieser volle Breite des Rastersystems div. Wenn Sie es wünschen halbe Breite sein, sollten Sie class="col-sm-6" bis 6.

Answer 5

Zentrierung Formular eingestellt mit twitter Bootstrap

<form class="center-block col-sm-6 col-sm-offset-3 col-xs-12">