用于填充列的行高 - Bootstrap布局(Height of rows to fill column - Bootstrap layout)

我知道这对你们大多数人来说可能很容易，但我仍然坚持这个问题。

我需要实现这个设计： 布局设计

...现在我有了这个当前的布局 。一般结构是一行col-3和col-9，这个col-9有两行，一行用于名称和职称，另一行用于统计在页面中（每个col-3）。 我需要它们来填充他父母的高度，但是高度属性不起作用。 这可能是一个干净的解决方案？ 非常感谢。

这是结构，它很简单。

<div class="row profile-header"> <div class="col-md-3 user-image text-center"> <img ...> <span>..</span> </div> <div class="col-md-9"> <div class="row"> <div class="col-md-12"> <h2 class="text-white">...</h2> <h4 class="text-muted">...</h4> </div> </div> <div class="row text-center"> <div class="col-md-3 stat"> <h3>...</h3> <small>...</small> </div> ... </div> </div>

I know this may be easy for most of you but I'm stuck with this issue.

I need to implement this design: Layout Design

... and for now I've got this Current layout.The general structure is a row with col-3 and col-9, this col-9 has two rows, one for name and job title, and the other one for statistics in the page (col-3 for each of them). I need them to fill the height of his parent, but height property doesn't work. Which could be a clean solution? Thanks a lot.

Here is the structure, it's pretty simple tho.

<div class="row profile-header"> <div class="col-md-3 user-image text-center"> <img ...> <span>..</span> </div> <div class="col-md-9"> <div class="row"> <div class="col-md-12"> <h2 class="text-white">...</h2> <h4 class="text-muted">...</h4> </div> </div> <div class="row text-center"> <div class="col-md-3 stat"> <h3>...</h3> <small>...</small> </div> ... </div> </div>

最满意答案

在父position: relative上使用position: relative然后position:absolute; bottom: 0; position:absolute; bottom: 0; 对孩子们。

那里的解释很好。

Use position: relative on the parent and then position:absolute; bottom: 0; on the children.

Nice explanation there.

更多推荐