Question

我想创建一个包含图像幻灯片的卡，并在侧面附带说明div。我正在尝试使说明div填充到与其旁边的图片相同的高度。

当前，说明div只是占用了其内容所需的高度，但是我希望它能够扩展以填充父div。

我尝试对flex-column div应用flex-grow并设置style =“ flex：1 1 auto”，但似乎没有任何改变。

我发现一些帖子处理的行填充了父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>

Answer 1

如果这对您有帮助。该图像将在卡片旁边对齐。

这是小提琴-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>

Answer 2

如果只希望文本列的高度填充父行的高度，则可以将其添加到self-align:stretch。

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

然后，您必须在子级列中进行调整，以得到想要的外观！

Bootstrap 4-如何使父级的列拉伸高度

2 个答案: