Карта Bootstrap имеет белую окантовку вокруг изображения

Question

Последовал примеру здесь со следующим кодом:

<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:

Answer 1

.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 для получения дополнительной информации

Answer 2

запись .card: border: none; bescuase .card имеет класс серой границы по умолчанию.

Answer 3

Пример, которому вы следовали, также имеет белую рамку, так как это делает Bootstrap. Вы не применяете никакой другой CSS, но это именно то, что вы должны сделать, чтобы избавиться от границы.

Например: применить border:0px solid transparent; к объекту с классом card.