Bootstrap 4 - выравнивание по вертикали Flex

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

Поскольку класс героя установлен на 70vh, я хочу, чтобы содержимое было вертикально выровнено внутри этого контейнера. Так H2, P, & a метки центрируется по вертикали в пределах этого героя обертки с использованием нового макета начальной загрузки прогибается сетка

Должен ли я установить мин-высоту для того, чтобы решить эту проблему?

.hero { 
 
    background: red; 
 
    width: 100%; 
 
    height: 70vh; 
 
}

<link rel="stylesheet" href="https://cask.scotch.io/bootstrap-4.0-flex.css"/> 
 

 
<div class="hero"> 
 
    <div class="container"> 
 
    <div class="row flex-items-xs-middle"> 
 
     <div class="col-xs"> 
 
     <h2>a real tag line here</h2> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce iaculis dapibus enim, ut pharetra magna venenatis non. Maecenas aliquam.</p> 
 
     <a class="tek-btn" href="#">Order now!</a> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Пример Fiddle - https://jsfiddle.net/7qynca6z/

источник

2016-12-26 Sam

«проблема, где моя строка и столбец не растягиваются быть полная высота контейнера» - Сколько высоты вам нужен контейнер DIV взять? –

Полная высота героя 70vh, поэтому я хотел бы, чтобы содержимое было вертикально выровнено внутри этого контейнера. Извините, я уточню вопрос, чтобы быть более ясным. – Sam

Просто сделайте hero Flexbox и дать ему align-items: center.

Смотреть демо ниже и Updated fiddle here:

.hero { 
 
    background: red; 
 
    width: 100%; 
 
    height: 70vh; 
 
    display: flex; 
 
    align-items: center; 
 
}

<link rel="stylesheet" href="https://cask.scotch.io/bootstrap-4.0-flex.css"/> 
 

 
<div class="hero"> 
 
    <div class="container"> 
 
    <div class="row flex-items-xs-middle"> 
 
     <div class="col-xs"> 
 
     <h2>a real tag line here</h2> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce iaculis dapibus enim, ut pharetra magna venenatis non. Maecenas aliquam.</p> 
 
     <a class="tek-btn" href="#">Order now!</a> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

источник

2016-12-26 17:17:40 kukkuz

Aha! Отлично - спасибо – Sam

Вот обновленный решение с использованием новейших Bootstrap 4 (альфа-6).
Дополнительных CSS не требуется.

https://www.codeply.com/go/hFtD71FMc4

<div class="hero"> 
    <div class="container d-flex align-items-center h-100"> 
    <div class="row"> 
     <div class="col-xs"> 
     <h2>a real tag line here</h2> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce iaculis dapibus enim, ut pharetra magna venenatis non. Maecenas aliquam.</p> 
      <a class="tek-btn" href="#">Order now!</a> 
     </div> 
    </div> 
    </div> 
</div>

источник

2017-05-18 13:41:49 ZimSystem

Bootstrap 4 - выравнивание по вертикали Flex

ответ

Смежные вопросы