Bootstrap卡在图像周围有白色边框

Posted 2023-02-02

按照示例here使用以下代码：

<div class="card" style="width:400px">
  <img class="card-img-top" src="image.png" alt="Card image">
  <div class="card-body">
    <h4 class="card-title">John Doe</h4>
    <p class="card-text">Some example text.</p>
    <a href="#" class="btn btn-primary">See Profile</a>
  </div>
</div>

这会在图像周围产生白色边框（仅在灰色区域内）。我没有应用任何其他CSS：

答案

.card的默认边框设置为：border: 1px solid rgba(0,0,0,.125);

要删除此边框，只需将类border-0添加到<div>，如下所示：

<div class="card border-0" style="width:400px"> 

有关更多信息，请参阅https://getbootstrap.com/docs/4.0/components/card/#border

另一答案

您遵循的示例也有一个白色边框，因为这是由Bootstrap完成的。你没有应用任何其他CSS，但这正是你应该做的摆脱边界。

例如：使用border:0px solid transparent;类将card应用于对象。

另一答案

写.card: border: none; bescuase .card有默认的灰色边框类。