Bootstrap 4 - содержимое прилипает к нижней части div, делая его квадратным

Question

Я работаю над приложением для составления бюджета и пытаюсь сделать что-то похожее на кучу плиток (ниже).Тем не менее, я застреваю, потому что, когда я собираюсь поместить контент в плитки, контент прилипает ко дну.

Я использую загрузчик 4, и я смог сделать несколько квадратных divов и стилизовать ихпо моему вкусу ( спасибо, ТАК ), но я просто не могу ничего к ним добавить.Как бы я решил это?

(также на связанной / не связанной ноте, когда я ставлю m-2 на делителях, это ударяет самый правый делитель вниз на строку)

.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

Вы можете попробовать подход 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>

также, вот рабочий пример :)

В примечании, я изменил ширину вашего класса squareBox ивысота, чтобы придать ему размеры:)

С другой стороны, вы можете применить класс flex-wrap к родительскому контейнеру, чтобы содержимое внутри него, которое не помещалось в данную строку, перешло к следующей строке.вместо

Answer 2

Я бы использовал другой метод, чтобы сделать квадраты квадратными.Используйте поле «dummy» для полей и поместите 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 3

Вместо того, чтобы использовать 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>

Answer 4

Вы хотели бы установить иконку на абсолютное значение и установить верхнюю часть с небольшим смещением влево и вверх.

Если вы не собираетесь делать эти вещи, выглядящие как иконки, как изображения.тогда вам придется сильно полагаться на абсолютное позиционирование.

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