垂直中心形式的Bootstrap 4

我需要中心（水平和垂直）我的輸入頁面的內容。我使用的引導4測試版，並通過我引導BS頁面上走，但它不工作 - https://getbootstrap.com/docs/4.0/layout/grid/垂直中心形式的Bootstrap 4

html, body { 
 
    height: 100%; 
 
    } 
 

 
    .bg-color { 
 
     width: 100%; 
 
     height: auto; 
 
     min-height: 100% !important; 
 
     background: #4e4376; 
 
     background: -webkit-linear-gradient(to bottom, #2b5876, #4e4376); 
 
     background: linear-gradient(to bottom, #2b5876, #4e4376); 
 
     
 
    } 
 
    body::after { 
 
     content: ""; 
 
     background-image: url("assets/group.jpg"); 
 
     opacity: 0.1; 
 
     top: 0; 
 
     left: 0; 
 
     bottom: 0; 
 
     right: 0; 
 
     position: absolute; 
 
     z-index: -1; 
 
     background-position: center; 
 
     background-repeat: no-repeat; 
 
     background-size: cover; 
 
    }

<div class="container-fluid"> 
 
     <div class="row justify-content-center align-self-center"> 
 
      <div class="col col-sm-6 col-md-6 col-lg-4 col-xl-3 h-100"> 
 
       <form action=""> 
 
       <div class="form-group"> 
 
        <input _ngcontent-c0="" class="form-control form-control-lg" placeholder="User email" type="text"> 
 
       </div> 
 
       <div class="form-group"> 
 
        <input class="form-control form-control-lg" placeholder="Password" type="password"> 
 
       </div> 
 
       <div class="form-group"> 
 
        <button class="btn btn-info btn-lg btn-block">Sign In</button> 
 
       </div> 
 
       </form> 
 
      </div> 
 
     </div> 
 
    </div>

你能幫我解決嗎？由於

爲了更好地解釋什麼，我需要：

來源

2017-08-29 Denis Stephanov

這裏有一個起動小提琴：http://jsfiddle.net/je3La8n8/ – isherwood

@isherwood我不需要起動模板...垂直中心沒有工作，像框架的引導做檢查更新的問題。 –

這是一個codepen，可能有助於... https://codepen.io/cowanjt/pen/PKxEmX 它實現了一些代碼引用的問題類似於你的問題。 – cwanjt

-1

您必須在您的項目引導。注意html的第一行。

html, body { 
 
    height: 100%; 
 
    } 
 

 
    .bg-color { 
 
     width: 100%; 
 
     height: auto; 
 
     min-height: 100% !important; 
 
     background: #4e4376; 
 
     background: -webkit-linear-gradient(to bottom, #2b5876, #4e4376); 
 
     background: linear-gradient(to bottom, #2b5876, #4e4376); 
 
     
 
    } 
 
    body::after { 
 
     content: ""; 
 
     background-image: url("assets/group.jpg"); 
 
     opacity: 0.1; 
 
     top: 0; 
 
     left: 0; 
 
     bottom: 0; 
 
     right: 0; 
 
     position: absolute; 
 
     z-index: -1; 
 
     background-position: center; 
 
     background-repeat: no-repeat; 
 
     background-size: cover; 
 
    }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
 
<div class="container-fluid"> 
 
     <div class="row justify-content-center align-self-center"> 
 
      <div class="col col-sm-6 col-md-6 col-lg-4 col-xl-3 h-100"> 
 
       <form action=""> 
 
       <div class="form-group"> 
 
        <input _ngcontent-c0="" class="form-control form-control-lg" placeholder="User email" type="text"> 
 
       </div> 
 
       <div class="form-group"> 
 
        <input class="form-control form-control-lg" placeholder="Password" type="password"> 
 
       </div> 
 
       <div class="form-group"> 
 
        <button class="btn btn-info btn-lg btn-block">Sign In</button> 
 
       </div> 
 
       </form> 
 
      </div> 
 
     </div> 
 
    </div>

來源

2017-08-29 21:35:09 kpie

我有它...我只有身體的HTML和CSS代碼，引導像框架工作，只有垂直。也不是。查看我現在添加的圖片。 –

嘗試添加'頂部：50％' – kpie

垂直中心形式的Bootstrap 4

回答

相關問題