Bootstrap карт одинаковой высоты и отзывчивых - PullRequest
Новая
       12

Bootstrap карт одинаковой высоты и отзывчивых

2 голосов
/ 13 февраля 2020

Я разработал сетку из трех столбцов (2 равных и один поменьше). Моя проблема в том, что я не могу установить высоту на карточках, я использовал их в px, и это сработало, но это не лучший способ. Я ожидаю, что три столбца имеют одинаковую высоту (100% страницы), а некоторые карты занимают 75%, 50%, 25% 20% страницы.

Есть ли способ определить Полностью отзывчивая высота без использования px?

Спасибо!

CODE 

 <div class="row">
          <div class="col">
            <div class="card card1">
              <div class="card-body">
                <p class="card-text">With supporting .</p>
              </div>
            </div>
          </div>
          <div class="col">
            <div class="card card1">
              <div class="card-body">
                <p class="card-text">With supporting .</p>
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col">
            <div class="card card1">
              <div class="card-body">
                <p class="card-text">With supporting .</p>
              </div>
            </div>
          </div>
          <div class="col">
            <div class="card card1">
              <div class="card-body">
                <p class="card-text">With supporting .</p>
              </div>
            </div>
          </div>
        </div>
      </div>

Ответы [ 2 ]

1 голос
/ 13 февраля 2020

используйте класс d-flex, как указано ниже. Это даст вам одинаковую высоту для всех 4 карт. 

<div class="col-3 d-flex">
  <div class="row">
   <div class="col">
     <div class="card card2">
       <div class="card-body">
         <p class="card-text">50% height</p>
      </div>
    </div>
   </div>
  </div>
  <div class="row ">
    <div class="col">
      <div class="card card2">
        <div class="card-body">
          <p class="card-text">50% height</p>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="col d-flex">
<div class="row">
  <div class="col">
    <div class="card card3">
      <div class="card-body">
        <p class="card-text">25% height</p>
      </div>
    </div>
  </div>
 </div>
        <div class="row">
          <div class="col">
            <div class="card card4">
              <div class="card-body">
                <p class="card-text">75% height</p>
              </div>
            </div>
          </div>
        </div>
</div>
0 голосов
/ 13 февраля 2020

Если у вас все в порядке с 50% высоты экрана, вы можете использовать «vh».

Следующие CSS работали в вашем кодовом пере:

.card2 .card-body {высота: 50vh; }

...