Bootstrap 使Flex子级与父级在网格列内的高度相等

2wnc66cl 于 2023-09-28 发布在 Bootstrap

关注(0)|答案(8)|浏览(161)

我试图建立一个价格表，其中每列包含一张卡片。我希望所有卡片都能拉伸到其父元素（.col）的高度。
注意：我使用的是Bootstrap 4，并尝试使用现有的网格系统（为了保持一致性）和这段特殊的标记来实现这一点。我不能让卡片长到它们的父容器的高度。这在目前的市场条件下是否可行？
基本标记如下：

<div class="row">
    <div class="col">
        <div class="card">
          blah
          blah
          blah
        </div>
        <div class="card">
          blah
        </div>
        <div class="card">
          blah
        </div>
    </div>
</div>

这是我的笔：https://codepen.io/anon/pen/oZXWJB

twitter-bootstrap

来源：https://stackoverflow.com/questions/42481924/make-flex-child-equal-height-of-parent-inside-of-grid-column

8条答案

按热度按时间

au9on6nz1#

将flex-grow : 1;添加到.card规则。HTML Markup很好。

.row {
  display: flex; 
  flex-flow: row wrap; 
  background: #00e1ff;
  margin: -8px;
}
.col { 
  display: flex; 
  flex: 1 0 400px;
  flex-flow: column; 
  margin: 10px;
  background: grey;
}
.card {
  display: flex;
  padding: 20px;
  background: #002732;
  color: white;
  opacity: 0.5;
  align-items: stretch;
  flex-direction: column;
  flex-grow: 1;
}

你也可以看看Foundation 6 Equalizer插件。他们使用JavaScript。

赞(0）回复(0）举报 2023-09-28

yshpjwxd2#

只需要在.card上添加height: 100%即可

.card {
  display: flex;
  padding: 20px;
  background: #002732;
  color: white;
  opacity: 0.5;
  align-items: stretch;
  flex-direction: column;
  height: 100%;
}

DEMO

赞(0）回复(0）举报 2023-09-28

ars1skjm3#

只需将flex: 1添加到card类。应该够了。在这个类中不需要display: flex; align-items: stretch; flex-direction: column。

赞(0）回复(0）举报 2023-09-28

dl5txlt94#

将高度：100%添加到.card

.card {
  display: flex;
  height: 100%;
  padding: 20px;
  background: #002732;
  color: white;
  opacity: 0.5;
  align-items: stretch;
  flex-direction: column;
}

https://codepen.io/anon/pen/zZGzyd示例

赞(0）回复(0）举报 2023-09-28

7cjasjjr5#

只要让你的.card高度为100%。

.card{
   height: 100%;
   display: flex;
   padding: 20px;
   background: #002732;
   color: white;
   opacity: 0.5;
   align-items: stretch;
   flex-direction: column;
}

赞(0）回复(0）举报 2023-09-28

sxissh066#

如果你使用的是Bootstrap 4，它们已经为你想要实现的目标提供了内置的类。
将card-deck添加到<div class="row card-deck">

赞(0）回复(0）举报 2023-09-28

xdyibdwo7#

在.col上添加display: inline-block;，在.class上添加min-height: 100%;

.row {
  display: flex; 
  ...
  }
.col { 
  display: inline-block; 
  ...
  }
.card {
  min-height:100%;
  ...
  }`

赞(0）回复(0）举报 2023-09-28

1mrurvl18#

要使用flexbox在.col类中垂直拉伸元素，只需将inline-style添加到.col元素：

<div style={{alignItems:"stretch"}} class="col">

或
添加align-items：stretch;属性添加到.col类：

.col {
    align-items: stretch;
    ...rest
}

赞(0）回复(0）举报 2023-09-28

我来回答

Bootstrap 使Flex子级与父级在网格列内的高度相等

8条答案

相关问题

热门标签

最新问答