Как выровнять нижнюю строку div в бутстрапе?

Я пытаюсь выровнять по размеру мой div div или, во всяком случае, последний элемент. Я использую bootstrap 3, и у меня есть:

<div id="main">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <div class="logo col-centered">
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-12 title text-center">THE TITLE</div>
    </div>
    <div class="row">
      <div class="col-md-5 col-centered text-center description">Lorem ipsum</div>
      <div class="description_arrow col-centered"></div>
    </div>
    <div class="row">
      <div class="col-md-5 col-sm-8 col-xs-12 col-centered">
        <div class="image-container">
          <img id="image-phone" src="img/image-phone.png" class="img-responsive" style="bottom:0px;">
        </div>
      </div>
    </div>
  </div>
</div>

В css я:

#main {
  min-height: 100%;
}

Теперь это выглядит так:

|------------------------|
|==========ROW===========|
|==========ROW===========|
|==========ROW===========|
|==========SPACE=========|
|==========SPACE=========|
|------------------------|

Я хочу, чтобы это выглядело так: Теперь это выглядит так:

|------------------------|
|==========ROW===========|
|==========ROW===========|
|==========SPACE=========|
|==========SPACE=========|
|==========ROW===========|
|------------------------|

Итак, я хочу сохранить последнюю строку внизу, как я могу это сделать?

EDIT: я не могу использовать margin-bottom на 2 ° div, потому что расстояние между двумя строками div и последней строкой div может меняться, и я не хочу и высокого значения, потому что тогда 13 "страница стала прокручиваемой.

EDIT2: я не могу использовать позицию: fixed и bottom: 0, потому что под div #main у меня есть другой div (всегда 100% высота).

WORKAROUND 1: Я делаю так:

<div id="main" style="position: relative;">

И в строке класса div я делаю:

<div class="row" style="position:absolute; bottom: 0px; width: 100%;">

Кажется, работает очень хорошо, но я не знаю, хорошее ли это решение или нет. Пожалуйста, дайте мне обратную связь!

Ответ 1

Если я правильно понимаю - не можете ли вы добавить margin-bottom во вторую строку, чтобы создать вертикальное пространство между второй и третьей строками?

Также обратите внимание, что col-12 может просто быть div внутри контейнера, им не нужна строка или класс col-12.

Ответ 2

Я предпочитаю создавать класс spacer следующим образом:

.spacer{
    height: height in %;
}

Затем просто добавьте класс spacer следующим образом:

<div class="row">
<div class="spacer">
<div class="row">

Таким образом, вы можете легко иметь пространство между строками, которые реагируют.

EDIT:

если у вас есть страница, которая не выше 1280 пикселей, вы можете попробовать, чтобы последняя строка придерживалась нижней части страницы.

.row:last-child {
    position: fixed;
    bottom: 0;
}

Ответ 3

Просто добавьте некоторое расстояние между ними, поместив div между этими строками, как <div class="top-buffer">, и css здесь .top-buffer { margin-top:10px; } Я надеюсь, что он сработает для вас.