固定底部导航栏有引导用户界面元素,每个元素
props
这样做…退房
Fixed bottom
<nav class="navbar fixed-bottom">
</nav>
但是,如果您希望问题中的当前代码按预期工作。我只要把
footer
具有
display: flex
给它一个
height
和
justify-content
和
align-items
center
.
body {
background: black;
height: 2000px;
}
.footerBF {
background-color: white;
text-align: center;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
font-size: 1em;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #f1f1f1;
}
button {
background-color: white;
border: none;
cursor: pointer;
}
<link href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" rel="stylesheet" />
<body>
<div class="card footerBF">
<div class="card-body">
<button type="button">
<i class="fa fa-lock fa-lg"></i>
</button>
<button type="button">
<i class="fa fa-globe fa-lg"></i>
</button>
<button type="button">
<i class="fa fa-plus fa-lg"></i>
</button>
<button type="button">
<i class="fa fa-home fa-lg"></i>
</button>
</div>
</div>
</body>
.
