我想创建一个包含图像幻灯片的卡片，并在侧面附有描述div。我试图让描述div 填充到与其旁边的图像相同的高度。
目前，描述div只是占用其内容所需的高度，但我希望它扩展以填充父div。
我尝试应用flex-grow并将style="flex: 1 1 auto"设置为flex-columndiv但它似乎没有改变任何东西。
我发现一些帖子解决了行填充父div的高度但没有列的帖子。
我目前也在使用w-100，让列填充父div的剩余宽度，但由于某种原因h-100似乎的工作方式不同。
HTML with 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>如果您只想让文本列的高度填充父行高度，您可以将其添加到self-align:stretch.
看看这个在行动： https://codepen.io/matteopieroni/pen/MXdGja
然后，您将不得不在列中进行调整 孩子 以获得您想要的外观！
如果这对你有任何帮助。 此对齐卡旁边的图像。
这是小提琴 - 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>