时间戳

首页 > 解决方案 > 社交图标未浮动到页脚的右上角

html - 社交图标未浮动到页脚的右上角

问题描述

我想让我的社交图标浮动到页脚的右侧而不是左侧。我正在使用浮动：对；在我的 CSS 中，但它只是从左侧略微缩进。

任何人都可以帮忙吗？

footer {
    background: #444;
    padding: 15px;
}

.copy {
    color: #fff;
    text-align: center;
    font-family:"Exo", sans-serif;
    padding-top: 20px;
}

.smed i {
    color: #fff;
    font-size: 40px;
    margin: 10px;
    padding-top: 10px;
    float: right;
}

.smed i:hover {
    color: #ffa500;
}
<footer>
        <div class="row text-center">
            <div class="col-md-4 smed">
                <i class="fab fa-github"></i>
                <i class="fab fa-linkedin"></i>
                <i class="fab fa-medium"></i>
                <i class="fab fa-youtube"></i>
            </div>
            <div class="col-md-4">
                <p class="text-light copy">Copyright 2020 Bootstrap4</p>
            </div>
        </div>
    </footer>

标签： htmlcssbootstrap-4

解决方案

嘿嗯我不知道你为什么问这个，对我来说它有效（至少在stackoverflow代码片段编辑器中）。图标浮动到右侧。

footer {
    background: #444;
    padding: 15px;
}

.copy {
    color: #fff;
    text-align: center;
    font-family:"Exo", sans-serif;
    padding-top: 20px;
}

.smed i {
    color: #fff;
    font-size: 40px;
    margin: 10px;
    padding-top: 10px;
    float: right;
}

.smed i:hover {
    color: #ffa500;
}
<footer>
        <div class="row text-center">
            <div class="col-md-4 smed">
                <i class="fab fa-github"></i>
                <i class="fab fa-linkedin"></i>
                <i class="fab fa-medium"></i>
                <i class="fab fa-youtube"></i>
            </div>
            <div class="col-md-4">
                <p class="text-light copy">Copyright 2020 Bootstrap4</p>
            </div>
        </div>
    </footer>

推荐阅读