html - div不能和screen一样宽，另一个div不允许

Question

我想让红色的 div 与屏幕宽度相同。但它与另一个 div 对齐，不能全宽。

红色 div 区域在绿色 div 之前可用，但我希望它是全宽的。

此外，我希望红色 div 垂直和水平居中。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="col-12 mt-2" style="border-radius: 12px; height: 250px; background-color: #5b6269">


  <div class="position-fixed-top border bg-info float-right"
  style="
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
    font-size: 30px;
    background-color: green;
    ">
      ئـۆفـه‌ری رۆژانــه‌
  </div>


  <div class="h-100 row align-items-center justify-content-center">
    <div class="col-12" style="background:red">
      Content content content content
    </div>
  </div>
</div>

Answer 1

您在标题上使用了 float-right 类，这使得下面的 div 不会 float 到整个宽度，添加一个带有 class="clearfix"的空 div 将解决您的问题。

这是决议的笔。 https://codepen.io/mohammad-aslam/pen/axBxPP

<div class="col-12 mt-2" style="border-radius: 12px; height: 250px; background-color: #5b6269">


        <div class="position-fixed-top border bg-info float-right" style=" border-bottom-right-radius: 20px; border-bottom-left-radius: 20px; font-size: 30px;background-color: green;">ئـۆفـه‌ری رۆژانــه‌
        </div>

<div class="clearfix"></div>
        <div class="h-100 row align-items-center justify-content-center">
            <div class="col-12" style="background:red">
                Content content content content
            </div>
        </div>
        </div>

希望对您有所帮助。