Смесь Boostrap с сеткой до равной высоты ряда внутри .col - PullRequest
Новая
       20

Смесь Boostrap с сеткой до равной высоты ряда внутри .col

0 голосов
/ 13 апреля 2019

Я хочу установить свой код для автоматического вычисления одинаковой высоты внутри .col, потому что, например, внутри .col у меня есть <h2> и <p>, которые могут иметь различное количество строк, поэтому высота этого элемента будет быть разным для каждого .col, я хотел бы получить одинаковую высоту для всех строк внутри .col.

Я пытался использовать утилиты flexbox, но я не нашел решения, поэтому мне интересно, поможет ли grid получить то, что я хочу, но я не знаю, отображает ли: grid наследует высоту элементов flexbox

Вот мой код: 

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <div class="header-bottom-box">
        <h2>Projektowanie <b>stron</b></h2>
        <div class="img-container">
          <img src="http://irson.linuxpl.eu/images/projektowanie-stron.jpg" class="img-fluid" alt="Projektowanie stron">
        </div>
        <p>Projektowanie oraz tworzenie serwisów internetowych.</p>
        <div class="text-right">
          <a href="/oferta.html">więcej</a>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="header-bottom-box">
        <h2>Pozycjonowanie <b>stron</b></h2>
        <div class="img-container">
          <img src="http://irson.linuxpl.eu/images/pozycjonowanie-stron.jpg" class="img-fluid" alt="Pozycjonowanie stron">
        </div>
        <p>Zwiększ pozycję swojej strony www w wynikach wyszukiwania.</p>
        <div class="text-right">
          <a href="/oferta.html">więcej</a>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="header-bottom-box">
        <h2>Outsourcing <b>IT</b></h2>
        <div class="img-container">
          <img src="http://irson.linuxpl.eu/images/outsourcing-it.jpg" class="img-fluid" alt="Outsourcing IT">
        </div>
        <p>Outsourcing informatyczny Profesjonalna opieka informatyczna dla firm.</p>
        <div class="text-right">
          <a href="/oferta.html">więcej</a>
        </div>
      </div>
    </div>
  </div>
</div>

https://codepen.io/anon/pen/jRweow

Я думал об использовании display: grid для .header-bottom-box и равной высоте внутреннего элемента.

EDIT Я пытался использовать GIRD:

enter image description here

И это работает, как я хочу, но я не знаю, почему я получаю этот пробел, как его удалить?

Ответы [ 2 ]

0 голосов
/ 14 апреля 2019

Использование дисплея: flex;также может решить вашу проблему, вы получите одинаковую высоту в каждом .col-md-4 

.col-md-4{
    align-items: center;
    display: flex;
    justify-content: center;
}
0 голосов
/ 13 апреля 2019

это нормально, сэр, все это произошло из-за последней кол. текст меньше первого и второго.

...