html - 如何让 Bootstrap 列占据主列的高度？

Question

我想将容器内的 div 垂直居中，但列采用文档的高度而不是 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% 的文档而不是 main...我该如何解决这个问题才能垂直对齐图像？

谢谢!

Answer 1

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

那么，不要编写 css 来设置列的高度:100%，你不需要那个。

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

我想你需要在行上设置一个高度:100%。为此添加一个 h-100 类