ブートストラップ4の中央にフォームを整列させます。

Question

フォームを中央に揃えて応答しています。私はいくつかの方法を試みましたが、成功しませんでした。私はすべてのテキストとフォームを集中させようとしています。私はブートストラップv4を使用しています。私はそれが助けるかどうか分からない。

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="jane.doe@example.com"> 
        </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%; 

}

Answer 1

あなたはインライン要素のために使用text-center

• ...様々なブートストラップ4センタリングメソッドを使用する必要があります。
• フレキシボックス要素（すなわち、form-inline）に使用justify-content-center

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="jane.doe@example.com"> 
          </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> 

の