在 n 行中以相等的高度拆分引导列，填充父高度

Posted 2023-03-06

【中文标题】在 n 行中以相等的高度拆分引导列，填充父高度

【英文标题】：Split bootstrap column in n rows with equal height, filling parent height

【发布时间】：2015-02-24 23:59:41

【问题描述】：

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

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

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

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

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

<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>，而不是第二列中的 3 个子行。

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

提前谢谢你

【问题讨论】：

你可以使用 flexbox:***.com/questions/27090585/… 或者 display:table:***.com/questions/11586277/…

【参考方案1】：

我已添加 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。

【讨论】：

感谢您的回复。如果可能的话，我正在寻找一种 css 方式来完成相同的结果！

【参考方案2】：

/* 使用了这个代码，它的帮助 */

.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

【讨论】：

你贴的demo不行，第二列还是顶对齐的。

哦，再添加一个属性第二列“vertical-align:top;”解决问题。演示bootply.com/qEuTywyWGM

【参考方案3】：

如果您愿意使用另一个 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>

---

---

请原谅内联样式...用于参考。希望这会有所帮助:)

【参考方案4】：

试试这个

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;

希望对大家有所帮助