Question

我正在倾斜Angular 4，我正在使用Bootstrap创建一个应用程序，我正在使用网格系统，但我不能将任何高度设置为网格的列。我已尝试在互联网上设置溢出的所有解决方案隐藏在容器中，然后设置清除：两者都在列上。无法使其正常工作

<div class="container" >
<div class="row">
<div class="col-lg-12" style="background-color:aqua">
 Column 1
</div>
</div>
<div class="row">
<div class ="col-lg-12" style="background-color:blueviolet">
 Column 2
</div>
</div>
</div>



.container{
height: 90%;
overflow:hidden;
}
.row{
height:25%;
clear: both;
}
.col-lg-12{
height:100%;
clear:both;
}

JsFiddle链接link

请告诉我!!!

Answer 1

问题在于您尝试使用百分比设置高度。

块元素的高度（.container { display: inline-block; width: 100%; height: 100%; margin: auto; overflow:hidden; } .row { overflow:hidden; width:100%; height:25%; } .col-lg-12 { float: left; width: 10%; height: 350px; -> height in pixels, not in percent clear: both; }是块元素）取决于内容的高度。

如果您指定百分比，则无论如何都会始终尊重内容的高度。

将高度更改为像素，您将控制元素的高度。

See this answer for more information

{{1}}

Answer 2

定义父容器的高度是否有效？（使用vh单位定义其高度，如下图所示，应该使其响应。）

很难从这段代码中看出，但在您的完整代码中，您是否定义了包含.container div的元素的高度？如果没有，那么您设置为.container高度的90％将无法正常工作，因为对于您正在创建的用户而言，它不会成为定义的上下文你的身高：90％。

如果你将高度添加到你的父元素 - 你可以在Codepen的这个例子中看到这个：https://codepen.io/msummers40/pen/EobqOo - 事情需要更多的定义/更高的高度。在Codepen页面上，我刚刚添加了一个新的父元素和一个相应的CSS选择器：

.container-of-container {
  height: 100vh;
  width: 100%;
}

当.container-of-container div的高度设置为100vh时，.container的高度变为90％。反过来，你的两行每个都是.container高度的25％。

在任何情况下，如果您设置.container的父元素的高度（使用px，em，vh等），您应该会看到调整大小更多地发生在您预期的位置。

我无法在Bootstrap网格系统中为我的列设置高度

2 个答案: