Bootstrap 3: Как вы выравниваете содержимое столбца в нижней части строки

У меня есть строка в столбцах Bootstrap 3 и 3 этой строки. Я хочу выровнять два столбца в нижней части строки и сохранить первый столбец в верхней части. Когда я использую традиционный подход с относительным положением в родительском и абсолютном для обоих столбцов, я получаю странное поведение, которое, я думаю, связано с чем-то в twitter bootstrap. Вот что происходит:

http://www.bootply.com/125735

Абсолют заставляет все столбцы на вершине друг друга, может ли кто-нибудь помочь мне? Конечный результат - иметь что-то вроде этого:

http://fahadalee.wordpress.com/2013/12/31/bootstrap-3-help-how-to-alin-div-in-bottom/

Спасибо

Ответы

Ответ 1

Вы можете использовать display: table-cell и vertical-align: bottom, на двух столбцах, которые вы хотите выровнять снизу, например:

.bottom-column
{
    float: none;
    display: table-cell;
    vertical-align: bottom;
}

Рабочий пример здесь.

Кроме того, это может быть возможный дублирующий вопрос .

Ответ 2

Вертикальное выравнивание снизу и удаление поплавка, похоже, сработают. Затем у меня была проблема с маржой, но -2px не позволяет им сбрасываться (и они все еще не перекрываются)

.profile-header > div {
  display: inline-block;
  vertical-align: bottom;
  float: none;
  margin: -2px;
}
.profile-header {
  margin-bottom:20px;
  border:2px solid green;
  display: table-cell;
}
.profile-pic {
  height:300px;
  border:2px solid red;
}
.profile-about {
  border:2px solid blue;
}
.profile-about2 {
  border:2px solid pink;
}

Пример здесь: http://www.bootply.com/125740#

Ответ 3

При работе с bootsrap обычно возникают три основные проблемы:

  • Как разместить содержимое столбца внизу?
  • Как создать многострочную галерею столбцов одинаковой высоты в одном .row?
  • Как центрировать столбцы горизонтально, если их общая ширина меньше 12, а оставшаяся ширина нечетна?

Чтобы решить первые две проблемы, загрузите этот небольшой плагин https://github.com/codekipple/conformity

Третья проблема решается здесь http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-centered-columns

Общий код

<style>
    [class*=col-] {position: relative}
    .row-conformity .to-bottom {position:absolute; bottom:0; left:0; right:0}
    .row-centered {text-align:center}   
    .row-centered [class*=col-] {display:inline-block; float:none; text-align:left; margin-right:-4px; vertical-align:top} 
</style>

<script src="assets/conformity/conformity.js"></script>
<script>
    $(document).ready(function () {
        $('.row-conformity > [class*=col-]').conformity();
        $(window).on('resize', function() {
            $('.row-conformity > [class*=col-]').conformity();
        });
    });
</script>

1. Выравнивание содержимого столбца в нижней части

<div class="row row-conformity">
    <div class="col-sm-3">
        I<br>create<br>highest<br>column
    </div>
    <div class="col-sm-3">
        <div class="to-bottom">
            I am on the bottom
        </div>
    </div>
</div>

2. Галерея колонн одинаковой высоты

<div class="row row-conformity">
    <div class="col-sm-4">We all have equal height</div>
    <div class="col-sm-4">...</div>
    <div class="col-sm-4">...</div>
    <div class="col-sm-4">...</div>
    <div class="col-sm-4">...</div>
    <div class="col-sm-4">...</div>
</div>

3. Горизонтальное выравнивание столбцов по центру (менее 12 единиц)

<div class="row row-centered">
    <div class="col-sm-3">...</div>
    <div class="col-sm-4">...</div>
</div>

Все классы могут работать вместе

<div class="row row-conformity row-centered">
    ...
</div>

Ответ 4

Я не знаю, почему, но для меня решение, предложенное Мариусом Станеску, нарушает спецификацию col (col-md-3, за которым следует col-md-4, возьмет все двенадцать строк)

Я нашел другое рабочее решение:

.bottom-column 
{
   display: inline-block;
   vertical-align: middle;
   float: none;
}