使用 Bootstrap 4 的方形响应式 div答案

【问题标题】：Square responsive divs using Bootstrap 4使用 Bootstrap 4 的方形响应式 div
【发布时间】：2019-08-01 23:04:35
【问题描述】：

我想使用 Bootstrap 4 创建一个类似于this page 的网格系统。我想在 col-sm-4 中创建一个方形框，并在 col-sm-8 中创建一个较长的矩形旁边高度。我无法创建一个响应式的方形框。我该怎么做？！

当前代码：

<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>

我尝试过的事情：

Using jQuery to set the height。这不适用于 div 上的填充，并且不响应。
This link 在那里我设法得到了一个旁边有一个矩形的方形框，但是一旦添加了文本，它就不再是方形了。

【问题讨论】：

你能在这里发布一些代码，以便我们提供示例。有很多关于引导网格的内容。
你试过什么？你的代码在哪里？请阅读：How to create a Minimal, Complete, and Verifiable example
@disinfor 我又添加了一些...
你能澄清一下：bootstrap 3 还是 4？
@G-Cyr 引导程序 4

标签： css twitter-bootstrap

【解决方案1】：

您可以使用 bootstrap 4 embed-responsive 类并完成

<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>Hello, world!</title>
</head>
<body>
<div class="container">
    <div class="row m-5">
        <div class="col-1">
            <div class="embed-responsive embed-responsive-1by1 text-center">
                <div class="embed-responsive-item bg-primary">col-1</div>
            </div>
        </div>
    </div>
    <div class="row m-5">
        <div class="col-2">
            <div class="embed-responsive embed-responsive-1by1 text-center">
                <div class="embed-responsive-item bg-primary">col-2</div>
            </div>
        </div>
    </div>
    <div class="row m-5">
        <div class="col-3">
            <div class="embed-responsive embed-responsive-1by1 text-center">
                <div class="embed-responsive-item bg-primary">col-3</div>
            </div>
        </div>
    </div>
    <div class="row m-5">
        <div class="col-4">
            <div class="embed-responsive embed-responsive-1by1 text-center">
                <div class="embed-responsive-item bg-primary">col-4</div>
            </div>
        </div>
    </div>
    <div class="row m-5">
        <div class="col-5">
            <div class="embed-responsive embed-responsive-1by1 text-center">
                <div class="embed-responsive-item bg-primary">col-5</div>
            </div>
        </div>
    </div>
    <div class="row m-5">
        <div class="col-6">
            <div class="embed-responsive embed-responsive-1by1 text-center">
                <div class="embed-responsive-item bg-primary">col-6</div>
            </div>
        </div>
    </div>
    <div class="row m-5">
        <div class="col-7">
            <div class="embed-responsive embed-responsive-1by1 text-center">
                <div class="embed-responsive-item bg-primary">col-7</div>
            </div>
        </div>
    </div>
    <div class="row m-5">
        <div class="col-8">
            <div class="embed-responsive embed-responsive-1by1 text-center">
                <div class="embed-responsive-item bg-primary">col-8</div>
            </div>
        </div>
    </div>
    <div class="row m-5">
        <div class="col-9">
            <div class="embed-responsive embed-responsive-1by1 text-center">
                <div class="embed-responsive-item bg-primary">col-9</div>
            </div>
        </div>
    </div>
    <div class="row m-5">
        <div class="col-10">
            <div class="embed-responsive embed-responsive-1by1 text-center">
                <div class="embed-responsive-item bg-primary">col-10</div>
            </div>
        </div>
    </div>
    <div class="row m-5">
        <div class="col-11">
            <div class="embed-responsive embed-responsive-1by1 text-center">
                <div class="embed-responsive-item bg-primary">col-11</div>
            </div>
        </div>
    </div>
    <div class="row m-5">
        <div class="col-12">
            <div class="embed-responsive embed-responsive-1by1 text-center">
                <div class="embed-responsive-item bg-primary">col-12</div>
            </div>
        </div>
    </div>
</div>

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>

【讨论】：

完美运行，谢谢！

【解决方案2】：

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

.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>

【讨论】：

这太棒了！尽管框中的多行文本存在问题。它不会环绕，当你有<br> 时它会很有趣。有办法解决吗？
@Tometoyou 在第二行插入了一个.ib div 来处理它；）如果您也将孩子变成一个弹性框，那么垂直百分比填充技巧将不可用。并排的 inline-block 元素将用于允许垂直对齐，就像 IE5 回来一样！
啊酷，如果我想在盒子内部添加填充，我会怎么做？
@Tometoyou 将填充添加到.ibbox 并将宽度设置为最多 100% 。您还可以轻松绘制边框和设置背景图片codepen.io/gc-nomade/pen/oGjdVZ
其实没关系，我可以将它添加到描述文本中并且它可以工作。谢谢，这正是我想要的:)