行高在引导程序 4 中不起作用答案

【问题标题】：Row height not working in bootstrap 4行高在引导程序 4 中不起作用
【发布时间】：2018-01-29 23:45:51
【问题描述】：

您好，我正在尝试使用 2 行在引导程序中创建一个简单的布局，但是，高度 (h-50) 类似乎对我不起作用。

我希望 h-50 占据屏幕的上半部分，而另一个 h-50 占据屏幕的下半部分。

实际上，我注意到行高只是内容的大小，不到屏幕的一半。

我有一些代码如下：

<div className="Profile container-fluid">

<div className="row h-50">
<div className="col">
<h1>Content</h1>
</div>
</div>

<div className="row h-50">
<div className="col-12 col-xl-3 ml-auto">Content</div>

<div className=" col-10 col-xl-3 mx-auto mr-xl-auto ml-xl-0 text-center text-xl-left">
<h3>Hello!</h3>
<p>Content</p>
 </div>
</div>
</div>

顺便说一句，如果您想知道我的 Profile css 类只是 min-height: 100vh;所以肯定有指定的高度。

【问题讨论】：

标签： twitter-bootstrap bootstrap-4

【解决方案1】：

行类只取其内容的高度。给它一个高度类是行不通的。但是，您可以在行 div 中放置另一个 div 并为其设置样式。您可以给它一个类名，例如 height150 并将 css 添加到其中。

<style>
.height150 {
  height: 150px;
}
</style>

<div className="row h-50" style="background-color:lavender;">
  <div class="height150">
    <div className="col">
     <h1>Content</h1>
    </div>
  </div>
</div>

【讨论】：