Bootstrap 4-将内容设为方形时内容会粘在div的底部

Question

我正在开发预算应用程序，并且正在尝试制作看起来像一堆瓷砖的东西（如下）。但是我被卡住了，因为当我将内容放入图块时，内容会粘在底部。

我正在使用引导程序4，我已经能够制作一些正方形的div，并按照自己的喜好（thanks SO）对其进行样式设置，但是我无法为它们添加任何内容。我该如何解决？

（同样在相关/不相关的音符上，当我在div上放置m-2时，它会将最右边的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

我会使用另一种方法来使盒子变成正方形。使用页边距“ dummy” 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实用程序将其放置在每个盒子中。

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

Answer 2

您可以尝试使用flexbox方法：）

.squareBox{
   /* makes expand to a square */
   width: 200px;
   height: 200px;
   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);
   max-width: 200px;
 }

.justify-start {
  align-self: flex-start !important;
}

.t-1 {
  font-size: 1.2rem;
}

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<div class="m-5 d-flex justify-content-center align-items-center">
  <div class="squareBox icon d-flex flex-column justify-content-between align-items-center m-2">
    <div class="d-flex align-self-start justify-content-between w-100 p-2">
      <img src="https://s3.amazonaws.com/rkersey-test-assets/netflix.png" height="20px" />
      <p class="font-weight-bold text-muted">$XX.X</p>
    </div>
    <div class="d-flex justify-content-center align-items-center text-white text-center">
      <p class="font-weight-bold t-1">Netflix & Hulu With roommcomm</p>
    </div>
    <div class="d-flex align-self-start justify-content-around w-100 text-white">
      <p>Sorted</p>
      <p>3</p>
    </div>
  </div>
  <div class="squareBox icon d-flex flex-column justify-content-between align-items-center m-2">
    <div class="d-flex align-self-start justify-content-between w-100 p-2">
      <img src="https://s3.amazonaws.com/rkersey-test-assets/netflix.png" height="20px" />
      <p class="font-weight-bold text-muted">$XX.X</p>
    </div>
    <div class="d-flex justify-content-center align-items-center text-white text-center">
      <p class="font-weight-bold t-1">End of The F****** World</p>
    </div>
    <div class="d-flex align-self-start justify-content-around w-100 text-white">
      <p>Sorted</p>
      <p>5</p>
    </div>
  </div>
</div>

另外，这是working example：）

在旁注中，我修改了squareBox类的宽度和高度以为其提供尺寸：）

另一方面，您可以在父容器上应用flex-wrap类，这样，其中不适合给定行的内容将转到下一行

Answer 3

您希望将图标设置为绝对，然后将其设置为顶部，并向左和向右偏移一点。

如果您不打算将这些“图标”外观作为图像。那么您就不得不严重依赖绝对定位。

.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);
}

.icon .row {
  position: absolute;
  top: 5px;
  left: 20px;
}

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

而不是使用padding-top: 100%;来定义方盒的尺寸 ，添加height and width。

.squareBox{
   width: 100px;
   height: 100px;
   padding: 5px;
 }

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