2017-08-29 45 views
1

我需要中心(水平和垂直)我的输入页面的内容。我使用的引导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>

你能帮我解决吗?由于

为了更好地解释什么,我需要: enter image description here

+0

这里有一个起动小提琴:http://jsfiddle.net/je3La8n8/ – isherwood

+0

@isherwood我不需要起动模板...垂直中心没有工作,像框架的引导做检查更新的问题。 –

+2

这是一个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>

+0

我有它...我只有身体的HTML和CSS代码,引导像框架工作,只有垂直。也不是。查看我现在添加的图片。 –

+0

尝试添加'顶部:50%' – kpie