БЛОГ НА HUSL


Как сделать высоту колонки на высоту двух строк bootstrap

Автор вопроса: Sirius_MkLain

Подскажите пожалуйста, есть две строки, в первой 3 колонки, а во второй две, в первой строке третья колонка должна быть в высоту двух строк,как это можно сделать?))

.delivery {
  background-color: rgba(67, 85, 134, 0.05);
}

/* Cards */
.card-delivery {
  border: none;
  background-color: #fff;
  padding: 1rem;
}

.card-delivery .card-icon {
  width: 96px;
}

.card-delivery .card-title {
  color: #435586;
}

/* card-info */
.card-info__one {
  border: none;
  background-color: rgba(67, 85, 134, .05);
  color: #435586;
}

.card-info__one .card-icon {
  width: 96px;
}

.card-info__one .card-title {
  color: #435586;
}

.card-info__two {
  border: none;
  background-color: #435586;
  color: #fff;
}

.card-info__two .card-icon {
  width: 96px;
}

.card-info__two .card-title {
  color: #fff;
}

.bubble{
  position: relative;
}

.bubble:before {
  content: '';
  background-image: url('img/bg/bubble.png');
  height: 48px;
  position: absolute;
  top: -8px;
  left: 8%;
  transform: translateX(-50%);
  width: 63px;
  z-index: 0;
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">

    <div class="row g-4">
                                    <div class="col-lg-4">
                                        <div class="card card-delivery h-100">
                                            <div class="card-body">
                                                <div class="card-icon">
                                                    <img alt="Кто доставит?" src="img/why_delivery.svg" class="img-fluid">
                                                </div>
                                                <h4 class="card-title">Кто доставит?</h4>
                                                <p>
                                                    Мы доверяем доставку зеркал нашим партнерам — транспортной компании «Стекловозов».
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-4">
                                        <div class="card card-delivery h-100">
                                            <div class="card-body">
                                                <div class="card-icon">
                                                    <img alt="Как узнать, что заказ готов?" src="img/where_delivery.svg" class="img-fluid">
                                                </div>
                                                <h4 class="card-title">Куда могут привезти?</h4>
                                                <p>
                                                    Доставка осуществляется по всей Москве и Московской области на специализированном транспорте.
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-4">
                                        <div class="card card-delivery card-transparent h-100">
                                            <div class="card-body">
                                                <div class="card-icon">
                                                    <img alt="Узнать цены" src="img/why_price.svg" class="img-fluid">
                                                </div>
                                                <h4 class="card-title">Узнать цены на доставку можно <a href="#">тут</a> </h4>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-8">
                                        <div class="card card-delivery h-100">
                                            <div class="card-body">
                                                <div class="card-icon">
                                                    <img alt="В какие дни можно" src="img/why_delivery.svg" class="img-fluid">
                                                </div>
                                                <h4 class="card-title">В какие дни можно ждать доставку?</h4>
                                                <p>
                                                Доставка осуществляется круглосуточно, 7 дней в неделю, включая выходные
                                                и праздничные дни. Возможен заказ доставка в назначнный час, вплоть
                                                до ±15 минут. Воспользуйтесь этой услугой у проверенного партнера.
                                                С тарифами можно ознакомиться здесь.
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                </div>


Источник

Ответы (3 шт):

Автор решения: teran

Покуда вопрос очередности блоков в мобильной версии не оговорен, то изменить сетку следующим образом.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col-8">
      <div class="row">
        <div class="col border">1</div>
        <div class="col border">2</div>
      </div>
      <div class="row">
        <div class="col border">3</div>        
      </div>
    </div>
    <div class="col-4 border">4</div>
  </div>
</div>

→ Ссылка
Автор решения: Юрий

Вся суть в том, что бы сделать две большие колонки и в одну из них поместить 1 блок (который занимает 2 ряда), а в другую колонку - остальные блоки.

.box {
  height: 100px;
  width: 100%;
}

.one {
  background-color: green;
  height: 200px;
  width: 100%;
}

.two {
  background-color: red;
}

.three {
  background-color: yellow;
}

.four {
  background-color: blue;
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">

<body>
  <div class="row">
    <div class="col-4">
      <div class="row">
        <div class="box one"></div>
      </div>
    </div>

    <div class="col-8">
      <div class="row">
        <div class="col-4">
          <div class="box two"></div>
        </div>
        <div class="col-4">
          <div class="box three"></div>
        </div>
        <div class="col-4">
          <div class="box four"></div>
        </div>
        <div class="col-4">
          <div class="box four"></div>
        </div>
        <div class="col-4">
          <div class="box two"></div>
        </div>
        <div class="col-4">
          <div class="box three"></div>
        </div>
      </div>
    </div>
  </div>
</body>

→ Ссылка
Автор решения: humster_spb

Если нет желания (или возможности) менять сетку, то можно использовать position: absolute на экранах более 992px (не забыв при этом задать position-relative для блока-обёртки row), а с 991px вернуть position: static с помощью медиа-запроса:

.delivery {
  background-color: rgba(67, 85, 134, 0.05);
}

/* Cards */
.card-delivery {
  border: none;
  background-color: #fff;
  padding: 1rem;
}

.card-delivery .card-icon {
  width: 96px;
}

.card-delivery .card-title {
  color: #435586;
}

/* card-info */
.card-info__one {
  border: none;
  background-color: rgba(67, 85, 134, .05);
  color: #435586;
}

.card-info__one .card-icon {
  width: 96px;
}

.card-info__one .card-title {
  color: #435586;
}

.card-info__two {
  border: none;
  background-color: #435586;
  color: #fff;
}

.card-info__two .card-icon {
  width: 96px;
}

.card-info__two .card-title {
  color: #fff;
}

.bubble{
  position: relative;
}

.bubble:before {
  content: '';
  background-image: url('img/bg/bubble.png');
  height: 48px;
  position: absolute;
  top: -8px;
  left: 8%;
  transform: translateX(-50%);
  width: 63px;
  z-index: 0;
}

.right-block {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
}
@media (max-width: 991px) {
  .right-block {
    position: static;
  }
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">

<div class="row g-4 position-relative">
  <div class="col-lg-4">
    <div class="card card-delivery h-100">
      <div class="card-body">
        <div class="card-icon">
          <img alt="Кто доставит?" src="img/why_delivery.svg" class="img-fluid">
        </div>
        <h4 class="card-title">Кто доставит?</h4>
        <p>
          Мы доверяем доставку зеркал нашим партнерам — транспортной компании «Стекловозов».
        </p>
      </div>
    </div>
  </div>
  <div class="col-lg-4">
    <div class="card card-delivery h-100">
      <div class="card-body">
        <div class="card-icon">
          <img alt="Как узнать, что заказ готов?" src="img/where_delivery.svg" class="img-fluid">
        </div>
        <h4 class="card-title">Куда могут привезти?</h4>
        <p>
          Доставка осуществляется по всей Москве и Московской области на специализированном транспорте.
        </p>
      </div>
    </div>
  </div>
  <div class="col-lg-4 right-block">
    <div class="card card-delivery card-transparent h-100">
      <div class="card-body">
        <div class="card-icon">
          <img alt="Узнать цены" src="img/why_price.svg" class="img-fluid">
        </div>
        <h4 class="card-title">Узнать цены на доставку можно <a href="#">тут</a> </h4>
      </div>
    </div>
  </div>
  <div class="col-lg-8">
    <div class="card card-delivery h-100">
      <div class="card-body">
        <div class="card-icon">
          <img alt="В какие дни можно" src="img/why_delivery.svg" class="img-fluid">
        </div>
        <h4 class="card-title">В какие дни можно ждать доставку?</h4>
        <p>
          Доставка осуществляется круглосуточно, 7 дней в неделю, включая выходные
          и праздничные дни. Возможен заказ доставка в назначнный час, вплоть
          до ±15 минут. Воспользуйтесь этой услугой у проверенного партнера.
          С тарифами можно ознакомиться здесь.
        </p>
      </div>
    </div>
  </div>
</div>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.