html - 如何将屏幕分为两种颜色的 bootstrap

嗨，我有一个角度组件，需要使用bootstrap 4将屏幕分为两种颜色...但是我有这个：


问题是，在右侧，黑框没有占据所有空间。有一个白色空间，即，黑空间没有占据所有应该占据的空间。

home.html：

<div class="container">
  <div class="row">
    <div class="col-6 col-lg-6 background">
      <p class="p-style">text</p>
    </div>
    <div class="col-6 col-lg-6 background2">
      <p class="p-style">text</p>
    </div>
  </div>
</div>

home.css：

.container {
    width: 100%;
    margin:0px !important;
    padding: 0px !important;
}
.row {
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: 0px !important;
    margin-left: 0px !important;
}

.background {
    width: 100%;
    height: 100vh;
    background-color: rgb(0, 121, 175);
    background-size: cover;
    color: rgb(67, 67, 67);
    text-align: center;
 }

 .background2 {
    width: 100%;
    height: 100vh;
    background-color: black;
    background-size: cover;
    color: rgb(67, 67, 67);
    text-align: center;
 }
 .p-style{
    font-size: 20px;
    color:white;
    font-weight: bold;
    margin:auto;
 }

我的问题是如何使用引导程序将屏幕对称地分为两部分？

谢谢！

最佳答案

container类具有指定的最大宽度。因此，如果您未进行设置，则效果很好。

.container {
    width: 100%;
    margin:0px !important;
    padding: 0px !important;
    max-width: unset;
}

关于html - 如何将屏幕分为两种颜色的 bootstrap ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/53229383/