将 bootstrap 列拆分为 n 行，高度相等，填充父级高度

Question

我对 Bootstrap 还很陌生，在尝试重现以下模板时，我正在与

grid

系统作斗争：

在此示例中，我有 3 列：

1. 第一列包含一些信息/图片。此栏包含大量数据。
2. 第二列包含 3 个（但可能有 n 个）联系信息（电子邮件、地址、电话号码……）
3. 第三列包含一些随机信息

我想将第二列分成 3 行，高度相等。我需要做的是将这 3 行垂直居中在第二列中，并可能扩展它们的高度以填充父级（第二列）高度。

这是我迄今为止所取得的成就的一个例子：

<div class="row container">
  <div class="col-md-4 first">
    <p> ... VERY LONG CONTENT ... </p></div>
  <div class="col-md-4 second">
    <div class="row">
      Telephone number
    </div>
    <div class="row">
      Address
    </div>
    <div class="row">
      email
    </div>
  </div>
  <div class="col-md-4 third">
    Something else, vertically centered
  </div>
</div>

找到这里带有我的代码的bootply

作为替代方案，我也很乐意使用

<ul>

，而不是第二列中的 3 个子行。

我该怎么做？是否有任何引导类可以应用于所有 3 行，以便让它们填满父级高度？

提前谢谢您

Answer 1

如果您愿意将其他 css 库与 bootstrap 一起使用。您可以继续使用 YAML CSS。它具有可定制的网格系统的良好功能。

你想要的可以在yaml中实现如下。

    <div class="ym-grid ym-equalize" style="border:2px solid greenyellow;">
        <div class="ym-g33 ym-gl">
            <div class="ym-gbox-left" style="border:2px solid red;">
                <h6>Left Grid Column</h6>
                <p> ... VERY LONG CONTENT ... </p>
                <p> ... VERY LONG CONTENT ... </p>
                <p> ... VERY LONG CONTENT ... </p>
                <p> ... VERY LONG CONTENT ... </p>
                <p> ... VERY LONG CONTENT ... </p>
                <p> ... VERY LONG CONTENT ... </p>
                <p> ... VERY LONG CONTENT ... </p>
                <p> ... VERY LONG CONTENT ... </p>
                <p> ... VERY LONG CONTENT ... </p>

            </div>
        </div>
        <div class="ym-g33 ym-gl">
            <div class="ym-gbox-left" style="border:2px solid red;">
                <div class="ym-grid" >
                    <div class="ym-gbox" style="border:2px solid orange;">
                        <br>
                        <p>Lorem ipsum dolor sit amet, consetetur sadipscing   elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna   aliquyam erat, sed diam voluptua.</p>
                        <br>
                        <br>
                    </div>
                </div>
                <div class="ym-grid" >
                    <div class="ym-gbox" style="border:2px solid orange;">
                         <br>
                        <p>Lorem ipsum dolor sit amet, consetetur sadipscing   elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna   aliquyam erat, sed diam voluptua.</p>
                        <br>
                        <br>
                    </div>
                </div>
                <div class="ym-grid" >
                    <div class="ym-gbox" style="border:2px solid orange;">
                         <br>
                        <p>Lorem ipsum dolor sit amet, consetetur sadipscing   elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna   aliquyam erat, sed diam voluptua.</p>
                        <br>
                        <br>
                    </div>
                </div>
            </div>
        </div>
        <div class="ym-g33 ym-gr">
            <div class="ym-gbox-right" style="border:2px solid red;">
                <h6>Right Grid Column</h6>
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing   elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna   aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo   dolores et ea rebum. Stet clita kasd gubergren.</p>
            </div>
        </div>
    </div>

---

---

请原谅内联样式...仅供参考。希望这有帮助:)

Answer 2

我添加了 css 样式来将列固定到位，如本answer所示：

.row {
    overflow: hidden; 
}
[class*="col-"] {
    margin-bottom: -99999px;
    padding-bottom: 99999px;
}

为了填充中间列的高度，我添加了 javascript，它计算左列的高度并将其重新分配到中间列的行：

$(".parent").each(function(){
    var $children = $(this).children();
    $children.height($(".height_parent").height() / $children.length - 2);
});

在 HTML 中，

parent

是添加到中间列 div 的类，并且

height_parent

类添加到左列 div。

这里更新了bootply。

Answer 3

试试这个

HTML

<div class="container">
<h6>parent row</h6>
<div class="row parent">
    <div class="col-md-4 column">
        <p style="padding-top: 260px;">Column one</p>
    </div>
    <div class="col-md-4 column">
        <div class="row subRow">
            <p>Subrow 1</p>
        </div>
        <div class="row subRow">
            <p>Subrow 2</p>
        </div>
        <div class="row subRow">
            <p>Subrow 3</p>
        </div>
    </div>
    <div class="col-md-4 column">
        <p style="padding-top: 260px;">Column Three</p>
    </div>
</div>

CSS

.subRow {
    color: orange;
    border: 3px solid orange;
    height: 100px;
    padding-left: 5px;
}

.container .parent {
    border: 3px solid green;
}

.container {
    color: green;
}

.column {
    border:3px solid red;
    text-align: center;
    color: red;
}

我希望它能帮助别人

Answer 4

/* 使用了这段代码，有帮助 */

.first{
    background: yellow;
    display: table-cell;
  float:none;
}
.second{
    background: white;
    display: table-cell;
  float:none;
}
.third{
    background: orange;  
  display: table-cell;
  float:none;
}

直播演示