Bootstrap 4 - Как сделать так, чтобы колонка растягивалась по высоте родителя

Question

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

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

Я пытался применить flex-grow и установить style = "flex: 1 1 auto" к div-элементу flex-column, но, похоже, он ничего не меняет.

Я нашел несколько постов, в которых строки имеют высоту родительского элемента div, но нет столбцов.

В настоящее время я также использую w-100, чтобы столбец заполнил оставшуюся ширину родительского div, но по некоторым причинам h-100, похоже, не работает так же.

HTML с Bootstrap 4.1.1 min.css:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card mb-4 box-shadow">
    <div class="flex-row card-body d-flex flex-fill align-items-center">
      <!-- Description Div -->
      <div class="flex-column d-flex w-100  flex-fill align-items-end showborder">
        <div class="p-2 ">
          <!-- Project Title -->
          <strong class="p-2 ">Title Text</strong>
          <!-- GitHub Link -->
        </div>
        <div class="p-2 w-100 ">
          <!-- Project Description -->
          <p>
            Description text Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
            aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </p>
        </div>
        <div class="mt-auto p-2 ">
          <!-- Link to Project -->
          <a class="btn btn-primary btn-sm" href="#">Check it out</a>
        </div>
      </div>

      <!-- Image Carousel -->
      <div class="carousel slide showborder" data-ride="carousel">
        <div class="carousel-inner ">
          <div class="carousel-item active">
            <img class="d-block w-100 " src="res/testimg1.jpg">
          </div>
          <div class="carousel-item">
            <img class="d-block w-100 " src="res/testimg2.jpg">
          </div>
        </div>
      </div>
    </div>
  </div>

Answer 1

Если вы просто хотите, чтобы высота текстового столбца заполняла высоту родительской строки, вы можете просто добавить к ней self-align:stretch.

Смотрите это в действии: https://codepen.io/matteopieroni/pen/MXdGja

Тогда вам нужно будет внести коррективы в дочерние элементы столбца, чтобы получить тот вид, который вам нужен!

Answer 2

Если это может быть вашей помощи. Это выровнять изображение рядом с картой.

Вот скрипка - http://jsfiddle.net/ctudb8o6/

<div class="container">
<div class="card-group">

<div class="card">
  <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>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>

</div>


<div class="card">
    <img class="card-img-left" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22286%22%20height%3D%22180%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20286%20180%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_164697f30e4%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A14pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_164697f30e4%22%3E%3Crect%20width%3D%22286%22%20height%3D%22180%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22107.1953125%22%20y%3D%2296.271875%22%3E286x180%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" alt="Card image cap">
  </div>

</div>
</div>
</div>