Question

我的页面上有一排带有一些列的行。这些包含的卡在内容量上略有不同。但我希望这些高度都相同。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="row mx-2 d-flex align-content-stretch flex-wrap flex-grow-1">
  <div class="col-md-3 ">
    <div class="card">
      <img src="image1.jpg" class="img-fluid" alt="" />
      <div class="card-body overflow-hidden text-center">
        <h4 class="color-primary">card 1</h4>
        <p></p>
        <a href="" class="btn btn-info"><i class="zmdi zmdi- 
       download"></i>download</a>
      </div>
    </div>
  </div>
  <div class="col-md-3 ">
    <div class="card">
      <img src="image1.jpg" class="img-fluid" alt="" />
      <div class="card-body overflow-hidden text-center">
        <h4 class="color-primary">card 1</h4>
        <p></p>
        <a href="" class="btn btn-info"><i class="zmdi zmdi- 
           download"></i>download</a>
      </div>
    </div>
  </div>
  <div class="col-md-3 ">
    <div class="card">
      <img src="image1.jpg" class="img-fluid" alt="" />
      <div class="card-body overflow-hidden text-center">
        <h4 class="color-primary">card 1</h4>
        <p></p>
        <a href="" class="btn btn-info"><i class="zmdi zmdi- 
       download"></i>download</a>
      </div>
    </div>
  </div>
  <div class="col-md-3 ">
    <div class="card">
      <img src="image1.jpg" class="img-fluid" alt="" />
      <div class="card-body overflow-hidden text-center">
        <h4 class="color-primary">card 1</h4>
        <p></p>
        <a href="" class="btn btn-info"><i class="zmdi zmdi- 
            download"></i>download</a>
      </div>
    </div>
  </div>
</div>

如您所见，我已经尝试了内容拉伸和项目拉伸。两者都不起作用。

Answer 1

列高度填充行引导程序4

['Name',
 '0',
 '(a) includes',
 '(b) srind',
 '(c) culture',
 '1',
 '(a) includes',
 '(b) srind',
 '(c) culture',
 '2',
 'subject']

Answer 2

将Bootstrap 4 h-100类用于height:100%;

<div class="card h-100">
  <img src="image1.jpg" class="img-fluid" alt="" />
  <div class="card-body overflow-hidden text-center">
    <h4 class="color-primary">card 1</h4>
    <p></p>
    <a href="" class="btn btn-info"><i class="zmdi zmdi- 
        download"></i>download</a>
  </div>
</div>

这样做，即使内容长度不同，您的卡片也将与行高匹配。

Answer 3

如果您希望所有这些包含的高度都与在内部列上使用display flex属性所需的高度相同

.col-md-3{
  display: flex;
}

->还将.card的宽度设置为100％。

.card{
  width: 100%;
}

使列高度填充行引导程序4

3 个答案: