Understrap / Bootstrap: .row-equal-height не работает для столбцов одинаковой высоты? - PullRequest
Новая
       74

Understrap / Bootstrap: .row-equal-height не работает для столбцов одинаковой высоты?

0 голосов
/ 15 декабря 2018

Я пытаюсь сделать 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/

Это столбец 3 под героем (Assisted Living, уход за памятью и независимый образ жизни), который я хочу сделать равным ростом.

Спасибо!

1 Ответ

0 голосов
/ 20 декабря 2018

Спасибо за обмен визуальными эффектами.

Ваш row-eq-height работает, но бывает так, что ваш контент внутри каждого столбца находится внутри вложенного дочернего элемента div, на который не влияет row-eq-height.

Длябыстрый и простой способ решения проблемы, особенно если ваш контент завершен, а затем добавьте это правило CSS на свой сайт ... 

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

В будущем выполните одно из следующих действий:

  1. Если содержимое в любом из ваших 3 столбцов расширяется, просто отрегулируйте это значение min-height.
  2. Если вы не хотите зависеть от этого метода, вытащите вложенные элементы div, которыенаходятся в каждом столбце, так что содержимое имеет только 1 уровень глубины, а не 2.

В любом случае UnderStrap по-прежнему является отличным выбором для темы и использует BootStrap.

...