web-dev-qa-db-de.com

Bootstrap 3.0 - Element nach unten schieben

Ich entschied mich für Twitter Bootstrap, um schnell eine App-Anzeigeschicht zu erstellen. In letzter Zeit habe ich Probleme gehabt. 

Ich versuche, das Element an den unteren Rand des Seitencontainers zu schieben, aber es bleibt zentriert. Das Hinzufügen der Klasse .Push-to-bottom { position: absolute; bottom: 50px } hat nicht geholfen.

11
Alan Kis

Nun, das Hauptproblem bestand in meinem schlechten Wissen über CSS- und Bootstrap-Konventionen. Ich fand diese Lösung akzeptabel, vielleicht ist es nicht die beste Vorgehensweise, aber sie funktioniert und ist voll zu verantworten.

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

Das Hauptziel bestand darin, div vollständig horizontal zentriert zu halten, so dass #home div in den Container eingewickelt wird und dann die #home div-Position angegeben wird: absolute Eigenschaft. Dann wird einfach die untere Eigenschaft entweder fest oder in Prozent angegeben.

0
Alan Kis

Wenn Sie die Abmessungen des Elements kennen, das Sie zentrieren möchten, können Sie einen linken Rand als negativen Wert für width/2 verwenden. Auf diese Weise ist jsFiddle example :

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

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

Verwenden Sie position: absolute, um es am Ende der Seite anzuzeigen, und verwenden Sie die .text-center-Klasse (von Bootstrap) zusammen mit width: 100%, um es in die Mitte zu bringen:

<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%;
}

Clicky hier für die Geige.

4
ninjaPixel