Можно ли создать столбец с высотой, равной его ширине в Bootstrap 4? - PullRequest
Новая
       1

Можно ли создать столбец с высотой, равной его ширине в Bootstrap 4?

1 голос
/ 28 января 2020

Можно ли создать столбец с высотой, равной его ширине в Bootstrap 4?

Первые 2 столбца должны быть квадратичными c, а третий столбец имеет высоту как предыдущие столбцы. Возможно ли это? 

<div class="row">
    <div class="col-lg-3 col-md-3 col-sm-12">

    </div>
    <div class="col-lg-3 col-md-3 col-sm-12">

    </div>
    <div class="col-lg-6 col-md-6 col-sm-12">

    </div>
</div>

Ответы [ 2 ]

0 голосов
/ 29 января 2020

Да, это возможно, но не с CSS & Bootstrap. Существует обходной путь, и вы можете использовать <svg> для поддержания соотношения ваших столбцов.

Вам необходимо поместить пустой столбец <svg> внутри столбца для поддержания соотношения. Используйте его с bootstrap class invisible, чтобы убедиться, что он никогда не виден. Поместите ваш контент, используя position:absolute.

Для отношения 3: 2 установите viewBox="0 0 3 2" и т. Д.

Однако здесь есть одна загвоздка. Если у вас есть макет с другим размером столбца, например col-3 и col-6, вам нужно настроить viewBox="" для каждого размера. Например, для col-3 используйте viewBox="0 0 1 1", а для col-6 необходимо использовать viewBox="0 0 2 1" для поддержания отношения col-3. Помните - в bootstrap столбцы растянуты до одинакового размера.

Посмотрите мою демонстрацию. 

/*DEMO*/body{padding:3rem}

.content{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  
  overflow:hidden;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<div class="row border">
  <div class="col-3 border border-primary">
    <svg class="invisible" viewBox="0 0 1 1"></svg>
    <div class="content">Lorem Ipsum</div>
  </div>
  <div class="col-3 border border-danger">
    <svg class="invisible" viewBox="0 0 1 1"></svg>
    <div class="content">Lorem Ipsum</div>
  </div>
  <div class="col-6 border border-success">
    <svg class="invisible" viewBox="0 0 2 1"></svg>
    <div class="content">Lorem Ipsum</div>
  </div>
</div>
0 голосов
/ 29 января 2020

то, что вы ищете, к сожалению, пока недоступно в bootstrap 4. но вы можете делать то, что хотите, с display: grid.

вот полное руководство по сетке: https://css-tricks.com/snippets/css/complete-guide-grid/

...