如何从容器中设置双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);
}

现在看起来像这样

正如您在第一张图片上所看到的...我需要的中心文本可能与上面的文本完全相同，但是bg颜色需要用于完整的网页。使用容器流体时，文本无法正确居中并粘贴到侧面...

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>