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

Question

我需要这样制作页脚

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);
}

现在是这个样子

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

Answer 1

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>