Bootstrap 4垂直对齐div的中心和底部 [英] Bootstrap 4 vertical align center and bottom of div
问题描述
我使用Bootstrap4..top
块应为100%宽度和全屏高度. .top-title
应该在屏幕中间. .btn-scroll-down
停留在屏幕下方.
I use Bootstrap 4. .top
block should be 100% width and full screen height. .top-title
should be in the middle of screen. .btn-scroll-down
shold be down of the screen.
我希望我的页面看起来像
I want my page looks like
HTML
<!-- top -->
<div class="top js-top">
<div class="container h-100">
<div class="row h-100">
<div class="col-lg-12">
<h1 class="top-title">
<span class="top-title-1">text</span>
<span class="top-title-2">title</span>
<span class="top-title-3">text</span>
</h1>
<a href="" class="btn-redirect link-go-to-match">go</a>
<a href="#" class="btn-scroll-down js-btn-scroll-down"></a>
</div>
</div>
</div>
</div>
<!-- /top -->
CSS
.btn-redirect {
display: block;
width: 301px;
height: 57px;
margin: 0;
padding: 20px 0;
cursor: pointer;
-webkit-transition: background-color .3s linear;
-moz-transition: background-color .3s linear;
-ms-transition: background-color .3s linear;
-o-transition: background-color .3s linear;
text-align: center;
text-transform: uppercase;
color: #fff;
border-radius: 10px;
background-color: #ff780c;
background-clip: padding-box;
}
.btn-scroll-down {
position: absolute;
bottom: 2%;
left: 50%;
display: block;
width: 54px;
height: 54px;
margin-left: -27px;
content: '';
-webkit-transition: opacity .3s;
-moz-transition: opacity .3s;
-ms-transition: opacity .3s;
-o-transition: opacity .3s;
opacity: .5;
border: 3px solid #fff;
border-radius: 50%;
background-clip: padding-box;
}
.top
{
overflow: hidden;
height: 100%;
height: 100vh;
min-height: 100%;
min-height: 100vh;
background-image: url(../images/bg_main.jpg);
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: cover;
background-color: red;
}
.top .top-title
{
padding-top: 35vh;
text-align: center;
text-transform: uppercase;
color: #fff;
}
.top .top-title .top-title-1
{
font-family: 'RobotoRegular';
font-size: 3vh;
display: block;
}
.top .top-title .top-title-2
{
font-family: 'DaysOneRegular';
font-size: 15vh;
line-height: 1;
display: block;
margin-top: 2vh;
}
.top .top-title .top-title-3
{
font-family: 'RobotoRegular';
font-size: 3vh;
display: block;
margin-top: 2vh;
}
.top .link-go-to-match
{
margin: 2vh auto 0 auto;
}
https://jsfiddle.net/LL0xm1jg/4/
但是在小屏幕上.btn-redirect
放置在文本上
But on the small screen .btn-redirect
is placed on texts
我尝试使用Bootstrap 4中的flex
属性,但是我的尝试失败了.有什么办法可以使其正常工作?
I've tried to use flex
properties from Bootstrap 4 but my attempts failed. Is there any way to make it work properly?
推荐答案
使用 flexbox 方式.为容器添加一个flexbox util类,以填充高度.此flex-fill
类将包含在Bootstrap 4.1中.
Use the flexbox way. Add a flexbox util class for the container to fill height. This flex-fill
class will be included in Bootstrap 4.1.
.flex-fill {
flex: 1 1 auto;
}
https://www.codeply.com/go/YUw4uBdG1O
<div class="top js-top vh-100 bg-danger text-white d-flex">
<div class="container flex-fill">
<div class="row h-100 align-items-center py-1">
<div class="col-lg-12 h-100 flex-fill d-flex flex-column align-items-center">
<div class="my-auto text-center">
<h1 class="top-title">
<span class="top-title-1">text</span>
<span class="top-title-2">title</span>
<span class="top-title-3">text</span>
</h1>
<a href="" class="btn btn-redirect link-go-to-match">go</a>
</div>
<a href="#" class="btn-scroll-down js-btn-scroll-down"></a>
</div>
</div>
</div>
</div>
使用d-flex flex-column
将col-lg-12
设置为flexbox列,然后将div中的h1和go按钮组合在一起.使用my-auto
将div垂直居中,然后按钮自然会推到底部.
Make the col-lg-12
a flexbox column using d-flex flex-column
and then group the h1 and go button together in a div. Use my-auto
to vertically center that div, and the button will naturally push to the bottom.
这篇关于Bootstrap 4垂直对齐div的中心和底部的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!