BootstrapVue как нажать sh кнопку b внизу элемента b-card

Question

Не могу нажать sh кнопку b внизу b-карты.

Я пробовал:
Bootstrap class = flex-box, как если бы я только что простой <div> (этот пример ниже)
Встроенный стиль с помощью flex box.
Использование нижнего колонтитула b-card с кнопкой внутри. Создание только b-botton стандартной html кнопки с bootstrap классом btn
Добавление дополнительной b-строки под b-card и добавление mt-auto к этому

Edit. Только что попробовал ...

<b-row align-v="end">
    <b-button class="mt-auto" href="#" variant="primary"></b-button>
</b-row>

---

<section>
  <b-card no-body class="overflow-hidden" style="max-width: 540px;">
     <b-row no-gutters>
        <b-col md="6">
           <b-card-img src="https://picsum.photos/400/400" class="rounded-0"></b-card-img>
        </b-col>
        <b-col md="6">
          <b-card-body class="d-flex flex-column">
            <h2>Course Check List</h2>
            <b-card-text>
              Here is the description of the course
            </b-card-text>

            <b-button  class="mt-auto" href="#" variant="primary">Why Aren't You Working</b-button>
         </b-card-body>

        </b-col>
     </b-row>
   </b-card>
</section>

Answer 1

элемент col также должен быть превращен во флекс-бокс, чтобы дочерний элемент растянулся на всю его высоту, чтобы флекс-дочерний блок, растягивающийся как флекс-дочерний элемент, вел себя так, как ожидалось:

Демо ниже

;)

window.onload = () => {
  new Vue({ el: '#app' })
}

body { padding: 1rem; }

<script src="https://unpkg.com/vue@2.6.11/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.7.0/dist/bootstrap-vue.js"></script>
<script src="https://unpkg.com/babel-polyfill/dist/polyfill.min.js"></script>
<link href="https://unpkg.com/bootstrap@4.4.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/bootstrap-vue@2.7.0/dist/bootstrap-vue.css" rel="stylesheet"/>
<div id="app">
  <section>
    <b-card no-body class="overflow-hidden" style="max-width: 540px;">
       <b-row no-gutters>
          <b-col md="6">
             <b-card-img src="https://picsum.photos/400/400" class="rounded-0"></b-card-img>
          </b-col>
          <b-col class="row" md="6">
            <b-card-body class="d-flex flex-column">
              <h2>Course Check List</h2>
              <b-card-text>
                Here is the description of the course
              </b-card-text>

              <b-button  class="mt-auto" href="#" variant="primary">Why Aren't You Working</b-button>
           </b-card-body>

          </b-col>
       </b-row>
     </b-card>
  </section>
</div>

в bootstrap - vue, это будет:

<section>
  <b-card no-body class="overflow-hidden" style="max-width: 540px;">
     <b-row no-gutters>
        <b-col md="6">
           <b-card-img src="https://picsum.photos/400/400" class="rounded-0"></b-card-img>
        </b-col>
        <b-col class="row" md="6">
          <b-card-body class="d-flex flex-column">
            <h2>Course Check List</h2>
            <b-card-text>
              Here is the description of the course
            </b-card-text>

            <b-button  class="mt-auto" href="#" variant="primary">Why Aren't You Working</b-button>
         </b-card-body>

        </b-col>
     </b-row>
   </b-card>
</section>

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

Answer 2

@ G-Cyrillus ответ работает, но с небольшим изяществом.

Однако в комментарии он упомянул, что тело карты не занимает все пространство столбца. Таким образом, добавление высоты 100% устранило проблему и выглядит немного элегантнее.