时间戳

首页 > 解决方案 > 如何从容器中设置双 bg 颜色

html - 如何从容器中设置双 bg 颜色

问题描述

我需要像这样制作页脚

页脚

html

<footer>
    <div class="container">
        <div class="row">
            <div class="col-7 copyright__text py-3">
                COPYRIGHT TEXT
            </div>
            <div class="col-5 contact p-3">
                dsadsada dsa dasdsa
            </div>
        </div>
    </div>
</footer>

css

footer .copyright__text{
background-color: rgb(152, 181, 79);
}

footer .contact {
background-color: rgb(81, 89, 103);
}

现在看起来像这样

页脚

正如您在第一张图片上看到的那样......我需要中心文本，可能与上面的文本完全相同，但 bg 颜色需要用于完整的网页。使用container-fluid，文本没有正确居中并粘在一边......

标签： htmlcsstwitter-bootstrap

解决方案

footer .copyright__text{
background-color: rgb(152, 181, 79);
}

footer .contact {
background-color: rgb(81, 89, 103);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<footer>
    <div class="container-fluid">
        <div class="row">
            <div class="col-7 copyright__text py-3">
                COPYRIGHT TEXT
            </div>
            <div class="col-5 contact p-3">
                dsadsada dsa dasdsa
            </div>
        </div>
    </div>
</footer>

推荐阅读