Пример компонента карты Bootstrap с «кухонной раковиной» работает неправильно

Question

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

Вот как это должно выглядеть: пример на bootstrap

И если я вставлю точно такой же код на моем конце (и на JSFiddle тоже), то это выглядит как это:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

Чего мне не хватает? Как добавить верхнюю границу, как в примере, без лишних хакерских CSS / кода?

Answer 1

Похоже, после 4.1 произошло небольшое изменение, чтобы убрать верхнюю границу первого элемента в list-group ...

.list-group-flush .list-group-item:first-child {
    border-top-width: 0px;
}

Так что, когда вы используете старше 4.1 граница есть: https://codeply.com/p/2n5yUhtPMY но с более новым 4.4 граница исчезла: https://www.codeply.com/p/BJwh8TtAth

Простой обходной путь - использовать border-bottom на card-body выше:

  <div class="card" style="width: 18rem;">
        <img class="card-img-top" src="//placehold.it/600" alt="Card image cap">
        <div class="card-body border-bottom">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        </div>
        <ul class="list-group list-group-flush">
            <li class="list-group-item">(fixed with border-bottom)</li>
            <li class="list-group-item">Dapibus ac facilisis in</li>
            <li class="list-group-item">Vestibulum at eros</li>
        </ul>
        <div class="card-body">
            <a href="#" class="card-link">Card link</a>
            <a href="#" class="card-link">Another link</a>
        </div>
  </div>

Другой вариант - использовать border-top на первом list-group-item