html - 如何在两种颜色的 Bootstrap 中拆分屏幕

Question

您好，我有一个 Angular 组件，需要使用 bootstrap 4 将屏幕分成两种颜色...但我有这个:

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

主页.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>

主页.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;
 }

我的问题是如何使用 bootstrap 将屏幕对称地分成两部分？

谢谢!

Answer 1

container 类指定了最大宽度。因此，如果您取消设置，它会正常工作。

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