使用Bootstrap 4的方形响应div [英] Square responsive divs using Bootstrap 4

问题描述

我想使用Bootstrap 4创建类似于此页面的网格系统。我想创建一个正方形col-sm-4中的矩形框，以及旁边具有相同高度的col-sm-8中的矩形框。我在创建具有响应能力的方形框时遇到了麻烦。我该怎么做？！

I want to create a grid system similar to this page using Bootstrap 4. I want to create a square box in a col-sm-4 and a longer rectangle next to it in a col-sm-8 of the same height. I'm having trouble creating a square box that is responsive. How can I do this?!

当前代码：

<div class="container">
    <div class="row section-box">
        <div class="col-sm-4 text-center description-text">
        first square box.
        </div>
        <div class="col-sm-8 description-image">
        second rectangle box.
        </div>
    </div>
</div>

我尝试过的事情：

• 使用jQuery设置高度。这不适用于div上的填充，并且没有响应。


• 此链接，我设法在其中获得一个带有矩形框的方形框，但是一旦添加文本，它便不再是方形框。

• Using jQuery to set the height. This doesn't work with padding on the div, and isn't responsive.
• This link where I managed to get a square box with a rectangle next to it, but as soon as text was added it was no longer a square.

推荐答案

最终，伪元素可能会有所帮助：

eventually, a pseudo element could help :

.col-sm-4:before,
.col-sm-8:before {
  content: '';
  width: 0;
}

.col-sm-4:before,
.col-sm-8:before,
.ib {
  white-space: normal;
  display: inline-block;
  vertical-align: middle;
  max-width: 100%;
}

.col-sm-4:before {
  padding-top: 100%;
  /* makes expand to a square */
}

.col-sm-8:before {
  padding-top: 50%;
  /* makes a rectangle half the height of a square */
}

[class^="col"] {
  white-space: nowrap;
  box-sizing: border-box;
  box-shadow: inset 0 0 0 5px white;
  padding: 0;
  text-align: center;
  background: url(http://lorempixel.com/400/200) tomato;
  background-size: cover;
}

.row {
  color: white;
  text-shadow: 0 0 black, 0 0 2px black;
}

.col-sm-4 {
  background: gray;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row section-box">
    <div class="col-sm-4 text-center description-text p-0">
      first square box.
    </div>
    <div class="col-sm-8 description-image p-0">
      second rectangle box.
    </div>
  </div>
  <div class="row section-box">
    <div class="col-sm-8 description-image p-0">
      <div class="ib">second<br> rectangle box.</div>
    </div>
    <div class="col-sm-4 text-center description-text p-0">
      first square box.
    </div>
  </div>
</div>

这篇关于使用Bootstrap 4的方形响应div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！