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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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