小编Eye*_*ox1的帖子

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

我正在尝试将表单与中心对齐并保持响应.我尝试了几种方法但没有成功.我试图将所有文本和表单集中在一起.我正在使用Bootstrap v4.我不确定这是否有帮助.

如您所见,fr未与中心对齐

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>
Run Code Online (Sandbox Code Playgroud)

CSS:

html,
body{
 height: 100%;
}

#cover {
  background: #222 url('../img/stars.jpg') center center no-repeat;
  background-size: cover;
  color: white;
  height: …
Run Code Online (Sandbox Code Playgroud)

html css twitter-bootstrap twitter-bootstrap-4 bootstrap-4

30
推荐指数
3
解决办法
7万
查看次数