html - Bootstrap 列顺序

标签 html css twitter-bootstrap bootstrap-4

所以我正在构建的网站上有页 footer 分,问题是它们显示的顺序。我希望社交图标位于上方 ©

看看:footer

HTML:

<div id="footerbot">
<div class="container">
    <div class="row">
        <div class="col-md-6">
            <h5 class="fbh">&copy;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/

相关文章:

html - 表格布局 :fixed is not working IE7

php - 玩家打开不止一次?

CSS 选择器不是元素类型的子元素?

html - 我在输入文本中的图标字体工作正常,除了 Internet Explorer

html - 输入右侧的样式 Font Awesome 图标

html - 如何从面板 Bootstrap 中取消投影效果?

javascript - summernote airMode 在 div 中无法正常工作

javascript - 单击时图标居中

javascript - 手动编辑日期或清除日期时, Bootstrap 日期选择器更改日期事件不会触发

html - 如何在文本区域中用相同的操作替换图像(图标)而不是输入类型文件?