Выровняйте div по основанию тела Bootstrap4 - PullRequest
Новая
       1

Выровняйте div по основанию тела Bootstrap4

0 голосов
/ 03 мая 2019

Я работаю с загрузочными картами.У меня есть верхний и нижний колонтитулы, и они отлично работают.В теле карты у меня есть название карты.Этот заголовок может занимать 1 или 2 строки в теле карты.Также в этом теле карты у меня есть некоторая информация в div.Я хочу выровнять этот информационный div по основанию тела карты, так как я использую row / col, чтобы правильно выровнять вещи, но поскольку 1 заголовок карты равен 1 строке, а другой - 2 строки, когда вы просматриваете карточки на странице, эта дополнительная информация не 'Выравнивание точно между картами, и выравнивание снизу решило бы то, что я думаю.

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

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<style>
  .box {
    position: relative;
    display: inline-block;
    width: 340px;
    height: 300px;
    background-color: #fff;
    border-radius: 5px;
  }
  
  .box:hover {
    /*-webkit-transform: scale(1.10, 1.10);
    transform: scale(1.10, 1.10);*/
    box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.3);
  }
</style>

<div class="container" style="margin-top: 25px;">
  <div class="row">
    <div class="col">

      <div class="box" style="margin-right: 30px; margin-bottom: 30px;">
        <div class="card" style="width: 100%; height: 100%;">

          <!-- CARD HEADER -->
          <div class="card-header" style="margin: 0px;">
Header Stuff
          </div>

          <!-- CARD BODY -->
          <div class="card-body" style="cursor: pointer;">
            <div class="row">
              <div class="col">
                <h6 class="card-title">This is a 1 line title</h6>
              </div>
            </div>

            <!--<div class="d-flex align-items-center">-->
            <div class="container" style="background-color: orangered">
              <div class="row">
                <div class="col-4">
                  Starts On:
                </div>
                <div class="col">
                  1/1/2019
                </div>
              </div>
              <div class="row">
                <div class="col-4">
                  Ends On:
                </div>
                <div class="col">
                  12/31/2019
                </div>
              </div>
              <div class="row">
                <div class="col-4">
                  #:
                </div>
                <div class="col">
                  52
                </div>
              </div>
            </div>
            <!--</div>-->
          </div>

          <!-- CARD FOOTER -->
          <div class="card-footer">
Footer stuff
          </div>

        </div>
      </div>

      <div class="box" style="margin-right: 30px; margin-bottom: 30px;">
        <div class="card" style="width: 100%; height: 100%;">

          <!-- CARD HEADER -->
          <div class="card-header" style="margin: 0px;">
            Header stuff
          </div>

          <!-- CARD BODY -->
          <div class="card-body" style="cursor: pointer;">
            <div class="row">
              <div class="col">
                <h6 class="card-title">This is a longer description that will span 2 rows making things not line up right between cards</h6>
              </div>
            </div>

            <!--<div class="d-flex align-items-center">-->
            <div class="container" style="background-color: orangered">
              <div class="row">
                <div class="col-4">
                  Starts On:
                </div>
                <div class="col">
                  1/1/2020
                </div>
              </div>
              <div class="row">
                <div class="col-4">
                  Ends On:
                </div>
                <div class="col">
                  12/31/2020
                </div>
              </div>
              <div class="row">
                <div class="col-4">
                  #:
                </div>
                <div class="col">
                  10
                </div>
              </div>
            </div>
            <!--</div>-->
          </div>

          <!-- CARD FOOTER -->
          <div class="card-footer">
Footer stuff here
          </div>

        </div>
      </div>

    </div>
  </div>
</div>

1 Ответ

1 голос
/ 04 мая 2019

Я сделал несколько вещей:

  • добавлено position:absolute с некоторым (24%) зазором снизу;
  • класс container реализовал ширину 100%, поэтому бокс теперь вышел за границы;
  • card-body класс реализовал заполнение 20px
  • Чтобы получить точный стиль, мы удалили ширину 20px из ширины 100% (из cowntainer)

полный фрагмент ниже: 

.box {
  position: relative;
  display: inline-block;
  width: 340px;
  height: 300px;
  background-color: #fff;
  border-radius: 5px;
}

.box:hover {
  /*-webkit-transform: scale(1.10, 1.10);
    transform: scale(1.10, 1.10);*/
  box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.3);
}

.orangeRedClass {
  position: absolute;
  bottom: 24%;
  width: calc(100% - 40px) !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />


<div class="container" style="margin-top: 25px;">
  <div class="row">
    <div class="col">

      <div class="box" style="margin-right: 30px; margin-bottom: 30px;">
        <div class="card" style="width: 100%; height: 100%;">

          <!-- CARD HEADER -->
          <div class="card-header" style="margin: 0px;">
            Header Stuff
          </div>

          <!-- CARD BODY -->
          <div class="card-body" style="cursor: pointer;">
            <div class="row">
              <div class="col">
                <h6 class="card-title">This is a 1 line title</h6>
              </div>
            </div>

            <!--<div class="d-flex align-items-center">-->
            <div class="container orangeRedClass" style="background-color: orangered">
              <div class="row">
                <div class="col-4">
                  Starts On:
                </div>
                <div class="col">
                  1/1/2019
                </div>
              </div>
              <div class="row">
                <div class="col-4">
                  Ends On:
                </div>
                <div class="col">
                  12/31/2019
                </div>
              </div>
              <div class="row">
                <div class="col-4">
                  #:
                </div>
                <div class="col">
                  52
                </div>
              </div>
            </div>
            <!--</div>-->
          </div>

          <!-- CARD FOOTER -->
          <div class="card-footer">
            Footer stuff
          </div>

        </div>
      </div>

      <div class="box" style="margin-right: 30px; margin-bottom: 30px;">
        <div class="card" style="width: 100%; height: 100%;">

          <!-- CARD HEADER -->
          <div class="card-header" style="margin: 0px;">
            Header stuff
          </div>

          <!-- CARD BODY -->
          <div class="card-body" style="cursor: pointer;">
            <div class="row">
              <div class="col">
                <h6 class="card-title">This is a longer description that will span 2 rows making things not line up right between cards</h6>
              </div>
            </div>

            <!--<div class="d-flex align-items-center">-->
            <div class="container orangeRedClass" style="background-color: orangered">
              <div class="row">
                <div class="col-4">
                  Starts On:
                </div>
                <div class="col">
                  1/1/2020
                </div>
              </div>
              <div class="row">
                <div class="col-4">
                  Ends On:
                </div>
                <div class="col">
                  12/31/2020
                </div>
              </div>
              <div class="row">
                <div class="col-4">
                  #:
                </div>
                <div class="col">
                  10
                </div>
              </div>
            </div>
            <!--</div>-->
          </div>

          <!-- CARD FOOTER -->
          <div class="card-footer">
            Footer stuff here
          </div>

        </div>
      </div>

    </div>
  </div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...