Question

我正在尝试使3列连续相等的高度。我使用了row-equal-height，但没有任何反应。

这是我的代码：

<div class="row row-eq-height">
  <div class="col-lg-4 content-block">
    <img src="../wp-content/themes/understrap-child/img/Assisted-Living.jpeg" />
    <div>
      <h2>Assisted Living</h2>
      <img class="icon" src="../wp-content/themes/understrap-child/img/icons/assisted-living.png" />
       Bridging the gap between seniors needing some help and being unable to care for themselves is the purpose of assisted living facilities...
...
     </div>
  </div>

  <div class="col-lg-4 content-block">
    <img src="../wp-content/themes/understrap-child/img/Memory-Care.jpeg" />
    <div>
      <h2>Memory Care</h2>
      <img class="icon" src="../wp-content/themes/understrap-child/img/icons/memory-care.png" />
       Enhancing the life of seniors with memory impairment (due to Alzheimer’s, dementia, or aging) is to specifically enhance the dignity and well-being of each resident...
    </div>
  </div>

  <div class="col-lg-4 content-block">
    <img src="../wp-content/themes/understrap-child/img/Independent-Living.jpeg" />
    <div>
      <h2>Independent Living</h2>
      <img class="icon" src="../wp-content/themes/understrap-child/img/icons/independent-living.png" />
     Engaging in a fulfilling lifestyle is so much more than where you live...
    </div>
  </div>

以下网站正在进行中：https://ciminocarestg.wpengine.com/

我想使英雄（辅助生活，记忆保健和独立生活）下的三栏保持相等的高度。

谢谢！

Answer 1

感谢您分享视觉效果。

您的row-eq-height工作正常，但恰恰是这样，您的内容在每一列中都位于不受row-eq-height影响的嵌套子div元素中。

要快速而轻松地解决此问题，尤其是在您的内容完成后，请将此CSS规则添加到您的网站...

.home .content-block div {
  min-height:425px;
}

将来，请执行以下任一操作：

如果您3列中的任何一列的内容都扩大了，只需调整该min-height值即可。
如果不想使用此技术，请拉出每列中的嵌套div，以使内容仅1级深，而不是2级。

无论哪种情况，UnderStrap仍然是主题和利用BootStrap的绝佳选择。

Understrap / Bootstrap：.row-equal-height无法用于等高列吗？

1 个答案: