Question

我有以下html：

<div class="container-fluid" style="height: 80px;">
  <div class="row">
    <div class="component">
       ...
    </div>
  </div>
</div>

如何让我的组件与我的容器具有相同的高度？我可以在行和组件上设置height: inherit;，但我想知道是否还有其他方法。

Answer 1

你可以在所有三个上使用相同的CSS类。

<div class="container-fluid equal">
  <div class="row equal">
    <div class="component equal">
       ...
    </div>
  </div>
</div>

.equal {
   height: 80px;
}

http://bootply.com/IkDJD4cf5G

Answer 2

您也可以使用Flexbox。我添加了边框颜色以使边界可见。

<div class="container-fluid">
  <div class="row">
    <div class="component">
      ...
    </div>
  </div>
</div>


.container-fluid {
  height: 80px;
  border: 1px solid black;
}
.row {
  height: 100%;
  text-align: center;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}
.component {
  border: 1px solid red;
}

https://jsfiddle.net/m655owr8/5/

Bootstrap：传播容器高度/宽度

2 个答案: