子 div 寬度不是 100%，左右兩側有某種填充

Question

當頁面以全寬加載時，左右兩側會出現一個黑色塊。 我無法弄清楚是什么原因造成的。 我上傳了下面的截圖。 任何幫助表示贊賞。 提前致謝。

 .container1 { display: flex; justify-content: center; align-items: center; width: 45%; height: 45%; background-color: black; position: absolute; top: 6%; left: 5%; z-index: 1; border: 2px solid }.row1 { height: 100%; }

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script> <div class="container border-primary container1"> <div class="row row1"> <div class="col col1" style="background-color: red;"> One of three columns </div> <div class="col col2" style="background-color: white; "> two of three columns </div> <div class="col col3" style="background-color: green;"> three of three columns </div> </div> </div>

Answer 1

您正在使用 Bootstrap，默認.container class 有一些填充。 而且您的行 class 也不是 100% 寬度。 所以，這是最終的代碼。

  .container1 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 45%;
  height: 45%;
  background-color: black;
  position: absolute;
  top: 6%;
  left: 5%;
  z-index: 1;
  border: 2px solid;
  padding: 0;
}

.row1 {
  height: 100%;
  width: 100%;
}

Answer 2

這是你的 d-flex 造成的。 將您的 css 更新為：

.container1 {
  justify-content: center;
  align-items: center;
  width: 45%;
  height: 45%;
  background-color: black;
  position: absolute;
  top: 6%;
  left: 5%;
  z-index: 1;
  border: 2px solid;
}

.row1 {
  height: 100%;
}