Bootstrap Вертикальное выравнивание Выпуск - PullRequest
Новая
       15

Bootstrap Вертикальное выравнивание Выпуск

0 голосов
/ 19 мая 2018

В основном я после звезд и жанров, чтобы быть в нижней части поста (в соответствии с нижней части постера).Как вы можете видеть, я пытался использовать align-self-end безуспешно.

Я специально ищу решение Bootstrap v4.Я уверен, что есть и другие способы достижения, добавляя пользовательский CSS, но я стараюсь сохранить его в чистом виде.

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

Заранее благодарен за вашу помощь.

1 Ответ

0 голосов
/ 19 мая 2018

Используйте d-flex и flex-column классы в col-md-8 div и flex-grow-1 в последнем ряду.Имейте в виду, что это работает только с последней версией Bootstrap-4. 

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-sm-8 offset-sm-2">
  <div class="card card-body">
    <div class="row">
      <div class="col-md-4">
        <img class="show-poster rounded w-100" src="https://nebula.wsimg.com/obj/NzQ3QUYxQzZBNzE4NjNFRTc1MTU6ODEyOTQ0ZTI1OTA3ZjZlMDcwZTkxNTAwY2YzZWUyNzA6Ojo6OjA=" alt="Superman Show Poster"></div>
      <div class="col-md-8 d-flex flex-column">
        <div class="row align-items-bottom">
          <div class="col-md-8">
            <h1>Superman</h1>
          </div>
          <div class="col-md-4 text-right">
            <h6>2012-17 (Ended)</h6><small class="text-muted">126/137 Episodes</small></div>
        </div>
        <div>
          <blockquote>Brian Finch him a criminal's worst nightmare and the greatest asset the Bureau has ever possessed.</blockquote>
        </div>


        <div class="row align-items-bottom flex-grow-1">
          <div class="col align-self-end"><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star-half"></i><br>7.8/10</div>
          <div class="col align-self-end">TV-14<br>CBS</div>
          <div class="col align-self-end text-right"><i class="fa fa-heart"></i><i class="fa fa-star"></i><i class="fa fa-music"></i><br>Family, Blah, blah</div>
        </div>
      </div>
    </div>
  </div>
</div>
...