1

Создаю 3 колонки (col-sm-4), благодаря CSS для класса .row-eq-height эти колонки имеют одинаковую высоту.

Кнопка в каждой колонке по понятным причинам располагается сразу после текста и так как количество текста разное, кнопки находятся в разных позициях относительно друг друга.

Чтобы сделать кнопки на одной линии хочу расположить их внизу внешнего div (col-sm-4), для этого использую данную инструкцию, в результате кнопки располагаются на одной линии, но начинают наползать на текст.

Как добиться нужного результата?

.row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.col-sm-4 {
  position: relative;
}

.button {
  position: absolute;
  bottom: 0px;
}
<div class="row row-eq-height">
	<div class="col-sm-4">
		<h3><span class="label label-primary">1</span> Заголовок</h3>
		<p>Текст</p>
		<div class="button">
			<a class="btn btn-primary btn-block" href="#">Посмотреть</a>
		</div>
	</div>
	<div class="col-sm-4">
		<h3><span class="label label-primary">2</span> Заголовок</h3>
		<p>Текст</p>
		<div class="button">
			<a class="btn btn-primary btn-block" href="#">Посмотреть</a>
		</div>
	</div>
	<div class="col-sm-4">
		<h3><span class="label label-primary">3</span> Заголовок</h3>
		<p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
		<div class="button">
			<a class="btn btn-primary btn-block" href="#">Посмотреть</a>
		</div>
	</div>
</div>

2
  • 1
    Раз уж используете flex, почему не посмотрите на v4-alpha.getbootstrap.com?
    – VenZell
    19 июл 2017 в 12:15
  • У меня v3 в шаблоне
    – fallincode
    19 июл 2017 в 12:56

1 ответ 1

1

.row-eq-height {
  display: flex;
  flex-flow: column nowrap;
}

.row-eq-height .col-sm-4 {
  position: relative;
  padding-bottom: 50px;
}

.row-eq-height .col-sm-4 .button {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  bottom: 10px;
}

.row-eq-height .col-sm-4 .button {
   display: inline-block;
}

@media (min-width: 768px) {
  .row-eq-height {
    flex-flow: row nowrap;
  }
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.min.css" />
  
<div class="container">
  <div class="row row-eq-height">
    <div class="col-sm-4">
      <h3><span class="label label-primary">1</span> Заголовок</h3>
      <p>
        Lorem ipsum dolor sit amet.
      </p>
      <div class="button">
        <a class="btn btn-primary" href="#">Посмотреть</a>
      </div>
    </div>
    <div class="col-sm-4">
      <h3><span class="label label-primary">2</span> Заголовок</h3>
      <p>
        Lorem ipsum.
      </p>
      <div class="button">
        <a class="btn btn-primary" href="#">Посмотреть</a>
      </div>
    </div>
    <div class="col-sm-4">
      <h3><span class="label label-primary">3</span> Заголовок</h3>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, quidem dignissimos placeat amet fugiat consectetur labore sunt sequi repellat officiis!
      </p>
      <div class="button">
        <a class="btn btn-primary" href="#">Посмотреть</a>
      </div>
    </div>
  </div>
</div>

7
  • Почти получилось! Теперь почему-то кнопки стали на всю ширину блока и не наследуют отступы родителя как другие элементы
    – fallincode
    19 июл 2017 в 12:52
  • Если убрать класс .btn-block и убрать left: 0, тогда нормально, но как оставить кнопки по всей ширине блока?
    – fallincode
    19 июл 2017 в 13:04
  • отступы регулируются left и right как и ширину можно задать width
    – SVE
    19 июл 2017 в 13:06
  • Если использовать класс .btn-block, то любые значения left и right не дают эффекта...
    – fallincode
    19 июл 2017 в 13:11
  • .btn-block задает кнопке стили display block width: 100% так что вы еще хотите? конечно кнопка будет на всю ширину блока, убрала этот класс у кнопки
    – SVE
    19 июл 2017 в 13:14

Ваш ответ

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

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