web-dev-qa-db-fra.com

Comment aligner en bas une ligne de séparation dans bootstrap?

J'essaie d'aligner ma ligne de division ou quoi qu'il en soit le dernier élément… .. J'utilise bootstrap 3 et j'ai:

<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>

Dans le css j'ai:

#main {
  min-height: 100%;
}

Maintenant, il a l'air si:

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

Je veux que le regard soit: Maintenant, il a l'air si:

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

Donc, je veux garder la dernière ligne en bas, comment puis-je faire?

EDIT: Je ne peux pas utiliser margin-bottom sur le div 2 °, car la distance entre le div de la rangée 2 ° et le div div de la dernière ligne peut changer, et je ne veux pas de valeur élevée, car alors sur l'écran 13 " la page est devenue déroulante.

EDIT2: Je ne peux pas utiliser position: fixed et bottom: 0, car sous div #main, j’ai d’autres div (toujours 100% hauteur).

CONTOURNEMENT 1: Je le fais:

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

Et dans le rang div class je fais:

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

Cela semble fonctionner très bien, mais je ne sais pas si c'est une bonne solution ou non ... donnez-moi un retour!

htmlcsstwitter-bootstrapresponsive-design
11
Riccardo

Si je comprends bien, ne pouvez-vous pas simplement ajouter margin-bottom à la deuxième ligne pour créer l'espace vertical entre la deuxième et la troisième ligne? 

Notez également que col-12 peut simplement être divisé dans un conteneur, ils n'ont pas besoin d'une ligne ou de la classe col-12.

1
Whoa

Ajoutez juste une marge entre eux en mettant un div entre ces lignes comme <div class="top-buffer">et le css est ici .top-buffer { margin-top:10px; } J'espère que cela fonctionnera pour vous.

0
Aitazaz Khan

Je préfère créer une classe spacer comme ceci:

.spacer{
    height: height in %;
}

Ensuite, ajoutez simplement la classe spacer comme ceci:

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

De cette façon, vous pouvez facilement laisser un espace réactif entre les lignes.

MODIFIER:

si vous avez une page qui n’est pas plus haute que 1280px, vous pouvez l’essayer pour que la dernière rangée reste collée au bas de la page

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