在 Bootstrap 4 中将表单与中心对齐

Question

我正在尝试将表单与中心对齐并保持响应。我尝试了几种方法，但没有成功。我正在尝试将所有文本和表单居中。我正在使用 Bootstrap 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="[e-mail]">
                    </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%;

}

原文由 eyedfox 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您需要使用各种 Bootstrap 4 居中方法…

• 使用 text-center 用于内联元素。
• 使用 justify-content-center 用于弹性盒元素（即 form-inline ）

https://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="[e-mail]">
                            </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>

原文由 Zim 发布，翻译遵循 CC BY-SA 4.0 许可协议