Question

因此，我目前正在构建的网站上的页脚部分，问题是它们的显示顺序。我希望社交图标位于©

看看：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个小时，不知道该如何完成。我将不胜感激任何帮助。谢谢

Answer 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>

Answer 2

Bootstrap 4使用flexbox将列放置在其行中，因此您可以将以下内容添加到CSS中，以控制列的order：

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

引导列顺序

2 个答案: