我正在尝试将表单与中心对齐并保持响应.我尝试了几种方法但没有成功.我试图将所有文本和表单集中在一起.我正在使用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="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>
</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%;
}
解决方法
您需要使用各种Bootstrap 4对中方法……
>将文本中心用于内联元素.
>对flexBox元素使用justify-content-center(即; 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="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>
