时间戳

首页 > 解决方案 > 如何在两种颜色的引导程序中分屏

html - 如何在两种颜色的引导程序中分屏

问题描述

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

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

谢谢！

标签： htmlcsstwitter-bootstrap

解决方案

该类container具有指定的最大宽度。所以，如果你取消它，它工作正常。

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

推荐阅读