Bootstrap 4 - 如何使列拉伸到父级的高度？答案

【问题标题】：Bootstrap 4 - How to make a column stretch to the height of the parent?Bootstrap 4 - 如何使列拉伸到父级的高度？
【发布时间】：2018-12-13 14:57:03
【问题描述】：

我想创建一张卡片，其中包含图片幻灯片，旁边有一个说明 div。我试图让描述 div 填充到与它旁边的图像相同的高度。

目前，div 的描述只占其内容所需的高度，但我希望它扩展以填充父 div。

我尝试应用flex-grow 并将style="flex: 1 1 auto" 设置为flex-column div，但它似乎没有任何改变。

我发现一些帖子的地址填满了父 div 的高度，但没有填满列。

我目前也在使用w-100，让列填充父div 的剩余宽度，但由于某种原因，h-100 的工作方式似乎不同。

带有 Bootstrap 4.1.1 min.css 的 HTML：

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

【问题讨论】：

你想要图片高度作为文字高度吗？？

标签： html css bootstrap-4 flexbox

【解决方案1】：

如果您只想让文本列的高度填充父行的高度，您可以添加self-align:stretch。

查看实际操作：https://codepen.io/matteopieroni/pen/MXdGja

那么您将不得不在子列中进行调整以获得您想要的外观！

【讨论】：

【解决方案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>

【讨论】：