如何使登錄表單不適合屏幕的整個寬度

我創建了一個當前適合整個屏幕寬度的登錄表單。我試圖通過使用寬度來縮小窗體的寬度：50％，它完美地確定窗體的大小，但是使窗體粘在屏幕的左側。我如何改變表單大小，同時使其集中和響應？有沒有簡單的屬性，我不知道？如何使登錄表單不適合屏幕的整個寬度

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>

來源

2016-11-12 YoungCoder

您可以根據屏幕的寬度，用引導的網格類。

這樣做：

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

相反的：

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

你可能有一個看Bootstrap Grids。希望這可以幫助！

來源

2016-11-12 08:45:13

這與margin：0 auto;訣竅！謝謝！ – YoungCoder

試試這個

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

來源

2016-11-12 08:27:29 falguni

按照類名稱來看，它看起來像使用引導程序作爲您的框架。

<div class="col-sm-12 login">被登錄表單設置到屏幕的整個寬度

變化（自舉12的網格系統的工作原理）在div類<div class="col-sm-6 col-sm-offset-3 login">，這將創建一個登錄表單是6列寬（ 50％的容器寬度），從左邊偏移3列（容器寬度的25％）。調整這些值以適應。

來源

2016-11-12 08:27:45 user6790086

您使用引導程序的網格，並將col的數字設置爲12： <div class="col-sm-12 login">，它使此div的寬度爲網格系統的全寬。如果你希望它是半寬，你應該設置class="col-sm-6"至6

來源

2016-11-12 08:27:55

中心使用Twitter的形式引導

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

來源

2016-11-12 08:28:31 michael

如何使登錄表單不適合屏幕的整個寬度

回答

相關問題