本文介绍了在 Bootstrap 4 中将表单居中对齐的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试将表单与中心对齐并保持响应.我尝试了多种方法,但都没有成功.我试图将所有文本和表单居中.我正在使用 Bootstrap v4.我不确定这是否有帮助.
HTML:
<div id="cover-caption"><div id="容器"><div class="col-sm-10 col-sm offset-1"><h1 class="display-3">欢迎使用 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 class="form-group"><label class="sr-only">电子邮件</label><input type="text" class="form-control" placeholder="[email protected]">
<button type="submit" class="btn btn-success ">好的,去吧!</button></表单>
<br><a href="#nav-main" class="btn btn-secondary-outline btn-sm" role="button">↓</a>
</节>
CSS:
html,身体{高度:100%;}#覆盖 {背景:#222 url('../img/stars.jpg') 居中不重复;背景尺寸:封面;白颜色;高度:100%;文本对齐:居中;显示:弹性;对齐项目:居中;
}
#cover-caption {宽度:100%;
}
解决方案
您需要使用各种 Bootstrap 4 居中方法...
- 对内联元素使用
text-center
. - 对 flexbox 元素使用
justify-content-center
(即;form-inline
)
https://codeply.com/go/Am5LvvjTxC
此外,要偏移列,col-sm-*
必须包含在 .row
中,并且 .row
必须在容器中...
<div id="cover-caption"><div id="容器"类=容器"><div class="row"><div class="col-sm-10 offset-sm-1 text-center"><h1 class="display-3">欢迎使用 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><输入类型=文本"类=表单控制"占位符=简·多伊"><div class="form-group"><label class="sr-only">Email</label>
好吧,去吧!</button></表单>
<br><a href="#nav-main";class="btn btn-secondary-outline btn-sm";角色=按钮">↓</a>
</节>
I am trying to align the form to the center and keep it responsive. I have tried several ways but no success. I am trying to center all the text and the form. I am using Bootstrap v4. I am not sure if that helps.
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">↓</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%;
}
解决方案
You need to use the various Bootstrap 4 centering methods...
- Use
text-center
for inline elements. - Use
justify-content-center
for flexbox elements (ie; form-inline
)
https://codeply.com/go/Am5LvvjTxC
Also, to offset the column, the col-sm-*
must be contained within a .row
, and the .row
must be in a container...
<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>
这篇关于在 Bootstrap 4 中将表单居中对齐的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!
08-04 03:45