引导4行，div底部有左右对齐按钮
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了引导4行，div底部有左右对齐按钮相关的知识，希望对你有一定的参考价值。
我有一些按钮在一行，两个在左边对齐，一个在右边对齐，如下所示：
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
/* Vertically center the text there */
line-height: 60px;
background-color: #f5f5f5;
}
.fa-arrows-alt {
color: rgb(231, 81, 37);
cursor: pointer;
}<script src="https://use.fontawesome.com/23ac9aaa92.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-12 col-md-12">
A div here
</div>
<div class="col-12 col-md-12">
<button type="button" class="btn btn-outline-dark btn-sm">Edit</button>
<button type="button" class="btn btn-outline-dark btn-sm">Delete</button>
<i class="fa fa-arrows-alt fa-2x float-right"></i>
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<span class="text-muted">Place sticky footer content here.</span>
</div>
</footer>我希望按钮强制它们始终位于div的底部，在页脚上方。我尝试使用bottom：0并定位绝对，固定但我收到了意想不到的结果。欢迎任何建议。
答案
使用Bootstrap中内置的flexbox类。你只需要CSS来确保身体是display:flex和全高......
https://www.codeply.com/go/lEaF85K1KU
CSS
body {
height:100vh;
display: flex;
flex-direction: column;
}
.flex-fill {
flex: 1 1 auto;
}
HTML
<main class="container-fluid d-flex flex-column flex-fill">
<div class="row flex-column flex-fill">
<div class="col-12 flex-fill">
A div here
</div>
<div class="col-12">
<button type="button" class="btn btn-outline-dark btn-sm">Edit</button>
<button type="button" class="btn btn-outline-dark btn-sm">Delete</button>
<i class="fa fa-arrows-alt fa-2x float-right"></i>
</div>
</div>
</main>
<footer class="container-fluid bg-light py-3">
Sticky Footer
</footer>
注意：flex-fill实用程序类将是included in the next Bootstrap 4.1发布。因此，在该版本之后，将不需要额外的用于flex-fill的CSS。
另一答案
使用bootstrap 4 position-absolute预定义类并添加bottom：0
.position-absolute {
bottom: 0;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid position-absolute">
<div class="row">
<div class="col-12 col-md-12 btn-row">
<button type="button" class="btn btn-outline-dark btn-sm">Edit</button>
<button type="button" class="btn btn-outline-dark btn-sm">Delete</button>
<button type="button" class="btn btn-outline-dark btn-sm float-right">Full Screen</button>
</div>
</div>
</div>另一答案
为了得到一些东西粘在屏幕的底部，做
<footer class="fixed-bottom">
要让按钮向左和向右移动，给每个按钮一个“左拉”或“拉右”的类
以上是关于引导4行，div底部有左右对齐按钮的主要内容，如果未能解决你的问题，请参考以下文章