如何将屏幕分为两种颜色的引导程序

Question

嗨，我有一个角度组件，需要使用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;
 }

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

谢谢！

Answer 1

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

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

Answer 2

另一种无需依赖引导程序的方式，因为您正在使用flex

.container {
  display: flex;    
  height: 100vh;  
  background-color: red;
}

.container .col {
  flex: 1;
  height: 100%;
}

.container .col:nth-child(2)
{
  background-color: blue;
}

<div class="container">
  <div class="col"></div>
  <div class="col"></div>  
</div>