Question

我对Bootstrap很陌生，在尝试重现以下模板时，我正在努力使用grid系统：

enter image description here

在这个例子中，我有3列：

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

我想将第二列拆分为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>

使用我的代码

here

作为替代方案，我也很乐意使用<ul>来代替第2列中的3个子行。

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

提前谢谢

Answer 1

试试这个

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 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

/ *使用此代码帮助* /

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

直播 Demo

将n个行中的bootstrap列拆分为相同的高度，填充父级高度

3 个答案: