Как выровнять все строки по дну контейнера в начальной загрузке (4.1)? - PullRequest
Новая
       44

Как выровнять все строки по дну контейнера в начальной загрузке (4.1)?

0 голосов
/ 14 декабря 2018

Настройка:

  1. У меня есть контейнер, покрывающий все окно просмотра (высота: 100vh);
  2. В этом контейнере у меня есть 4 строки.

Обязательно:

  1. Мне нужны все строки в нижней части контейнера.
  2. Между строками не должно быть промежутков.(Короче говоря, мне нужно, чтобы все содержимое страницы было выровнено по нижней части экрана. Если осталось какое-то дополнительное пространство, оно должно остаться в верхней части страницы.)

Я попытался использовать self-align-endно это относится только к столбцам в строке, а не к строке в контейнере.

Заранее спасибо;)

Фрагмент: 

.row:last-child {
  position: fixed;
  bottom: 0;
  left: 0;/*optional*/
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<div class="container-fluid bg-dark" style="height: 100vh;">
  <div class="row bg-warning container-fluid no-gutters justify-content-start">
    This is Row 1
  </div>
  <div class="row bg-danger container-fluid no-gutters justify-content-center">
    This is Row 2
  </div>
  <div class="row bg-warning container-fluid no-gutters justify-content-end">
    This is Row 3
  </div>
  <div class="row bg-success container-fluid no-gutters justify-content-center">
    This is Row 4
  </div>
</div>

Ответы [ 2 ]

0 голосов
/ 14 декабря 2018

Добавить "d-flex align-content-end flex-wrap"

Попробуйте это. 

/*
.row:last-child {
  position: fixed;
  bottom: 0;
  left: 0;
}*/
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<div class="container-fluid bg-dark d-flex align-content-end flex-wrap" style="height: 100vh;">
  <div class="row bg-warning container-fluid no-gutters justify-content-start">
    This is Row 1
  </div>
  <div class="row bg-danger container-fluid no-gutters justify-content-center">
    This is Row 2
  </div>
  <div class="row bg-warning container-fluid no-gutters justify-content-end">
    This is Row 3
  </div>
  <div class="row bg-success container-fluid no-gutters justify-content-center">
    This is Row 4
  </div>
</div>
0 голосов
/ 14 декабря 2018

Добавить класс это для container d-flex align-items-end

/*.row:last-child {
  position: fixed;
  bottom: 0;
  left: 0;
}*/
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<div class="container-fluid bg-dark d-flex align-items-end" style="height: 100vh;">
  <div class="row bg-warning container-fluid no-gutters justify-content-start">
    This is Row 1
  </div>
  <div class="row bg-danger container-fluid no-gutters justify-content-center">
    This is Row 2
  </div>
  <div class="row bg-warning container-fluid no-gutters justify-content-end">
    This is Row 3
  </div>
  <div class="row bg-success container-fluid no-gutters justify-content-center">
    This is Row 4
  </div>
</div>
...