引导列顺序答案

【问题标题】：Bootstrap Columns Order引导列顺序
【发布时间】：2019-04-25 06:20:03
【问题描述】：

所以我在当前正在构建的网站上有页脚部分，问题是它们显示的顺序。我希望社交图标高于 ©

看看：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 将类“order-md-6”添加到每个 div，但首先它不起作用，其次它破坏了布局 - 它将两个元素“推”到中心。在bootstrap4中甚至可能吗？我也有一个问题，你可以在我上传的图片上看到这些项目。我为此苦苦挣扎了 2 小时，但我不知道如何完成这项工作。我将不胜感激任何帮助。谢谢

【问题讨论】：

您的#footerbot img{ ... } 有一个padding-top: 35px; 和一个top: 50%;，它们将图标从顶部推开，这就是它们如此低的原因。我建议删除这些。
@Jeremy 我删除了 top: 50% 但我无法删除 padding-top 因为这是我在页脚中居中这些图标的方式
你也可以做 #footerbot a{ line-height: 100px; } #footerbot img{ height: 60px; margin-top: 20px; } 并删除 padding-top 因为我认为这将确保它与您的 h5 完全居中。

标签： html css twitter-bootstrap bootstrap-4

【解决方案1】：

不确定您提供的是否是页脚的完整代码示例，但如果那是您的完整 html，则您缺少结束标记。

另外，假设你想要的只是图标超出版权线并居中，试试这个：

#footerbot .socialIcons {
  text-align: center;
}

<div id="footerbot">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="socialIcons">
                                <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>
                <h5 class="fbh">&copy;2018 - Appo, All Right Reserved</h5>
            </div>

        </div> <!-- end of row -->
    </div>
    </div>

【讨论】：

text-align to .socialIcons 不起作用，我已经尝试过了，现在仔细检查。是的，它没有复制结束标签；）

【解决方案2】：

Bootstrap 4 使用 flexbox 将列定位在其行中，以便您可以将以下内容添加到 CSS 以控制列的 order：

.col-md-6:last-child {
  order: -1;
}

【讨论】：

我将此添加到媒体查询及其工作！谢谢你的朋友！现在我必须让它们居中..
@MarkR 没问题。
没有理由添加更多的 CSS。引导includes ordering classes.