web-dev-qa-db-fra.com

Bootstrap 3.0 - Poussez l'élément vers le bas

J'ai choisi Twitter Bootstrap pour la construction rapide de couches d'affichage d'applications, j'ai récemment rencontré un problème. 

J'essaie de pousser l'élément au bas de la page, mais en le gardant centré. L'ajout de la classe .Push-to-bottom { position: absolute; bottom: 50px } n'a pas aidé.

htmlcsstwitter-bootstraptwitter-bootstrap-3
11
Alan Kis

Eh bien, le principal problème tenait à ma faible connaissance des concepts CSS et Bootstrap. J'ai trouvé cette solution acceptable, ce n’est peut-être pas la meilleure approche, mais elle fonctionne et est pleinement responsable.

<div class="container">
  <div id="home"> 
    <div class="row">
      <div class="col-lg-12">
        <h1>Some heading</h1>
      </div>
    </div>
  </div>  
</div>

L'objectif principal était de garder div entièrement centré horizontalement, donc #home div est encapsulé dans un conteneur, puis donnez la propriété #home div position: absolute, puis changez simplement la propriété bottom fixe ou donnée en pourcentage.

0
Alan Kis

Si vous connaissez les dimensions de l'élément que vous souhaitez centrer, vous pouvez utiliser une marge gauche comme valeur négative de width/2. Comme ceci exemple jsFiddle :

.Push-to-bottom {
  position: absolute;
  bottom: 50px;
  left: 50%;
  margin-left: -50px;
}

#element {
  background-color: #000;
  width: 100px;
  height: 100px;
}
8
thiagobraga

Utilisez position: absolute pour le mettre au bas de la page et utilisez la classe .text-center (à partir de Bootstrap) avec width: 100% pour le placer au milieu:

<div class="container">
  <div class="row force-to-bottom text-center">
    <div class="col-xs-12">
            <h1>
            <input class="btn btn-primary" type="submit" value="Save">
        </h1>

    </div>
</div>


.force-to-bottom {
  position:absolute;
  bottom: 5%;
  width: 100%;
}

Cliquez ici pour le violon.

4
ninjaPixel