如何使 Bootstrap 列占主列的高度？

Question

我想将容器内的 divs 垂直居中，但列采用文档的高度而不是 main 的高度（其高度等于其内容之一）特此我的代码：

<main class="col-lg-12">

 <div class="col-lg-1 col-md-0"></div>
 <div class="col-lg-4 col-md-6 col-xs-12">
  <img src={{image}}>
 </div>

<div class="col-lg-1 col-md-0" ></div>

<div class="col-lg-4 col-md-6 col-xs-12">
 <div class="title">{{title}}</div>
 <div  class="text">{{text1}}</div>  
</div>

<div class="col-lg-1 col-md-0"></div>

</main>

main div{
 height: 100%;
}

我可以在开发人员工具中看到 div 占用了 100% 的文档而不是主文档...我该如何解决这个问题才能垂直对齐图像？

谢谢！

Answer 1

第一个 bootstrap .col 应该在 .row 容器中你可能需要在你的主列中嵌套列

那么，不要写 css 来在列上设置 height:100%，你不需要那个。

如果我是对的 .col 有 display: flex，那么你可以使用 align-items-stretch class 让你的列占据包装的高度，作为缺失的 .row

我想您需要在该行上输入 height:100%。为此添加一个 class h-100

如何使 Bootstrap 列占主列的高度？

How to make Bootstrap columns take the height of main?

html

css

center

vertical-alignment

twitter-bootstrap