所以我正在构建的网站上有页 footer 分,问题是它们显示的顺序。我希望社交图标位于上方 ©
看看:footer
HTML:
<div id="footerbot">
<div class="container">
<div class="row">
<div class="col-md-6">
<h5 class="fbh">©2018 - Appo, All Right Reserved</h5>
</div>
<div class="col-md-6">
<a href="#"><img src="img/facebook.png" href="#"></a>
<a href="#"><img src="img/twitter.png" href="#"></a>
<a href="#"><img src="img/dribble.png" href="#"></a>
<a href="#"><img src="img/gplus.png" href="#"></a>
<a href="#"><img src="img/youtube.png" href="#"></a>
</div>
</div> <!-- end of row -->
</div>
CSS:
#footerbot {
background-color: rgba(34, 48, 71, 0.8);
}
#footerbot img {
display: block;
float: right;
top: 50%;
padding-top: 35px;
padding-left: 15px;
}
#footerbot h5 {
color: #00FFF0;
line-height: 100px;
}
我尝试使用 col-md-6 向每个 div 添加类“order-md-6”,但首先它不起作用,其次它破坏了布局 - 它将两个元素“推”到中心。在 bootstrap4 中甚至有可能吗?我在将这些元素居中时也遇到了问题,您可以在我上传的图片上看到这些元素。我为此苦苦挣扎了 2 个小时,但我不知道如何完成这项工作。我将不胜感激任何帮助。谢谢
最佳答案
Bootstrap 4 使用 flexbox将列定位在它们的行中,以便您可以将以下内容添加到您的 CSS 以控制 order列数:
.col-md-6:last-child {
order: -1;
}
关于html - Bootstrap 列顺序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53433097/