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

查找here带有我的代码的 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>

<小时/>

<小时/>

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