Храните предметы внизу страницы

Question

Используя bootstrap 4, я пытаюсь сохранить ряд с некоторыми столбцами внизу страницы.При добавлении позиции фиксированной и нижней, это отбрасывает размещение и не остается в центре.Я предполагаю, что это как-то связано с flex?

JSFiddle: http://jsfiddle.net/1dLrfsbh/1/

<div class="container-fluid">
    <div class="mt-3 text-center justify-content-center">
    <img src="https://via.placeholder.com/800x200" class="img-fluid logo" />

    <div class="chk-actions">
       <div class="row">
           <div class="col-lg-6">
              <a href="#">
                <img class="img-fluid" src="https://via.placeholder.com/800x200" />
              </a>
           </div>

           <div class="col-lg-6">
               <a href="#">
                  <img class="img-fluid" src="https://via.placeholder.com/800x200" />
               </a>
         </div>
      </div>
</div>

.chk-actions {
  position: fixed;
  bottom: 20px;
}

.chk-actions a {
  margin-bottom: 10px;
}

Answer 1

Я не думаю, что это имеет какое-либо отношение к гибкости.Речь идет об определении положения элемента.Пока вы только определили его нижнее значение / позицию.

Если я предполагаю, что вы используете сеточный желоб Bootstrap по умолчанию, равный 30 пикселей, я бы просто добавил 15 пикселей для левой и правой сторон.

.chk-actions {
  position: fixed;
  bottom: 20px;
  left: 15px;
  right: 15px;
}

.chk-actions a {
  margin-bottom: 10px;
}

<div class="container-fluid">
    <div class="mt-3 text-center justify-content-center">
    <img src="https://via.placeholder.com/800x200" class="img-fluid logo" />

    <div class="chk-actions">
       <div class="row">
           <div class="col-lg-6">
              <a href="#">
                <img class="img-fluid" src="https://via.placeholder.com/800x200" />
              </a>
           </div>

           <div class="col-lg-6">
               <a href="#">
                  <img class="img-fluid" src="https://via.placeholder.com/800x200" />
               </a>
         </div>
      </div>
</div>