0

Суть в следующем: надо выравнять блоки по вертикали, но примеры с оф. сайта почему-то не работает. Похожий вопрос уже был, но я не понял как он это пофиксил

<div class = "container">
		<div class="row align-items-center">
			<div class="col" style='border:1px solid black'>1</div>
			<div class="col" style='border:1px solid black'>2</div> 
			<div class="col" style='border:1px solid black'>3</div> 
		</div>
	</div>

1 ответ 1

2

Почему вы решили, что не работает? Если родительскому элементу колонок (.row) не задана определенная высота или колонки имеют одинаковую высоту, то эффект вы не увидите.

.row {
  height: 150px;
  border: 1px solid #060;
}

.col {
  border: 1px solid #999;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<div class="container">
  <div class="row align-items-center">
    <div class="col">1</div>
    <div class="col">2</div>
    <div class="col">3</div>
  </div>
</div>

.row {
  border: 1px solid #060;
}

.col {
  border: 1px solid #999;
}

.col:nth-child(2) {
  height: 100px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<div class="container">
  <div class="row align-items-center">
    <div class="col">1</div>
    <div class="col">2</div>
    <div class="col">3</div>
  </div>
</div>

1
  • Спасибо, теперь я понял в чем проблема.
    – puposik
    10 июн 2018 в 13:37

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.