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 that you have read and understand our privacy policy and code of conduct.

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