html - Bootstrap 4 - 使 div 变为正方形时内容会粘在 div 的底部

Question

我正在开发一个预算应用程序，我正在尝试制作看起来像一堆瓷砖的东西(下图)。但是我卡住了，因为当我将内容放入磁贴中时，内容会粘在底部。

我使用的是 bootstrap 4，我已经能够制作一些方形 div，并根据自己的喜好设计它们的样式 (thanks SO)，但我无法向它们添加任何内容。我将如何解决这个问题？

(还有一个相关/不相关的注释，当我将 m-2 放在 div 上时，它会将最右边的 div 向下一行)

.squareBox:before{
   padding-top: 100%;
   /* makes expand to a square */
   content: '';
   width: 0;
   white-space: normal;
   display: inline-block;
   vertical-align: middle;
   max-width: 100%;
 }

 .icon {
   font-family: lato;
   background: #1A3967;
   border-radius: 10px;
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 }

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

  
  <div class="container">
    <div class="row">
      <div class="col-md-6 mt-4">
        <div class="row">
            <div class="col-sm-4 squareBox icon m-2">
              <div class="row">
                <div class="col-xs-6">
                  <img src="https://s3.amazonaws.com/rkersey-test-assets/netflix.png" height="20px" />
                </div>
              </div>
            </div>
            <div class="col-sm-4 squareBox m-2">
              first square box.
            </div>
            <div class="col-sm-4 squareBox m-2">
              first square box.
            </div>
          </div>
      </div>
      <div class="col-md-6 mt-4"></div>
    </div>
  </div>

目前的样子:

它需要看起来像什么:

Answer 1

我会使用不同的方法来制作方框。使用边距“虚拟”div，并将 squareBox 放在列内...

.dummy {
    margin-top: 100%;
}

.squareBox {
    background: #1A3967;
    color: #fff;
    border-radius: 10px;
    position: absolute;
    top: 30px;
    bottom: 0;
    left: 30px;
    right: 0;
}

然后你可以在每个盒子里放任何需要的东西，使用 Bootstrap 4 flexbox utils 来定位它。

演示:https://www.codeply.com/go/MZrc2ELjIG