將窗體與Bootstrap中的中心對齊4

我試圖將窗體與中心對齊並保持響應。我嘗試了幾種方法，但沒有成功。我正在嘗試將所有文本和表單居中。我正在使用Bootstrap v4。我不確定這是否有幫助。將窗體與Bootstrap中的中心對齊4

HTML：

<section id="cover"> 
    <div id="cover-caption"> 
     <div id="container"> 
      <div class="col-sm-10 col-sm offset-1"> 
       <h1 class="display-3">Welcome to Bootstrap 4</h1> 
       <div class="info-form"> 
       <form action="" class="form-inline"> 
        <div class="form-group"> 
         <label class="sr-only">Name</label> 
         <input type="text" class="form-control" placeholder="Jane Doe"> 
        </div> 
        <div class="form-group"> 
         <label class="sr-only">Email</label> 
         <input type="text" class="form-control" placeholder="[email protected]"> 
        </div> 
        <button type="submit" class="btn btn-success ">okay, go!</button> 
       </form> 
       </div> 
       <br> 

       <a href="#nav-main" class="btn btn-secondary-outline btn-sm" role="button">&darr;</a> 
      </div> 
     </div> 
    </div> 
</section>

CSS：

html, 
body{ 
height: 100%; 
} 

#cover { 
    background: #222 url('../img/stars.jpg') center center no-repeat; 
    background-size: cover; 
    color: white; 
    height: 100%; 
    text-align: center; 
    display: flex; 
    align-items: center;

}

#cover-caption { 
    width: 100%;

}

來源

2017-06-06 EyedFox1

可能重複[如何使用Bootstrap使表單居中？]（https://stackoverflow.com/questions/31255563/how-to-center-a-form-using -bootstrap） –

這不是重複的，因爲它僅與Bootstrap 3相關。 – ZimSystem

你需要使用的各種引導4定心方法...

使用text-center爲內聯元素。
使用justify-content-center爲Flexbox的元件（即; form-inline）

https://www.codeply.com/go/Am5LvvjTxC

另外，爲了抵消該列中，col-sm-*必須包含在.row內，並且所述.row必須是在一個容器..

<section id="cover"> 
    <div id="cover-caption"> 
     <div id="container" class="container"> 
      <div class="row"> 
       <div class="col-sm-10 offset-sm-1 text-center"> 
        <h1 class="display-3">Welcome to Bootstrap 4</h1> 
        <div class="info-form"> 
         <form action="" class="form-inline justify-content-center"> 
          <div class="form-group"> 
           <label class="sr-only">Name</label> 
           <input type="text" class="form-control" placeholder="Jane Doe"> 
          </div> 
          <div class="form-group"> 
           <label class="sr-only">Email</label> 
           <input type="text" class="form-control" placeholder="[email protected]"> 
          </div> 
          <button type="submit" class="btn btn-success ">okay, go!</button> 
         </form> 
        </div> 
        <br> 

        <a href="#nav-main" class="btn btn-secondary-outline btn-sm" role="button">↓</a> 
       </div> 
      </div> 
     </div> 
    </div> 
</section>

來源

2017-06-06 12:05:34 ZimSystem

將窗體與Bootstrap中的中心對齊4

回答

相關問題