Ich lege eine Login-Bildschirm, und auf diesem Bildschirm wird nur eine Box mit LOGIN und Passwort. Ich muss vertikal und horizontal zentralisieren (wie bei jedem herkömmlichen Anmeldebildschirm).So zentrieren Sie eine Box auf Twitter Bootstrap
Wie kann ich dies mit Twitter Bootstrap erreichen?
Danke!
Wenn Sie Bootstrap-Gitter verwenden, dann können Sie Ihre Spalten-Offset:
<div class="row">
<div class="span6 offset3">
Your content goes here
</div>
</div>
Siehe Beispiel hier: http://twitter.github.com/bootstrap/scaffolding.html#gridSystem
Oder Sie können einfach CSS verwenden, um einfach Element Mittelblock,
div.login-box{
margin:0 auto;
width: 720px;
}
UPDATE zu Johny Antwort: Für Bootstrap 3; die Syntax ist ein wenig anders:
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
Your content goes here
</div>
</div>
oder: besser noch:
<div class="container">
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
Your content goes here
</div>
</div>
</div>
Aber können Sie Ansprechverhalten mit Ihrem zweiten Ansatz erreichen? – dennisbot
Sie können einfach verschiedene CSS-Medienabfragen verwenden, um unterschiedliche Breite für verschiedene Auflösungen festzulegen. Oder Sie können mit der prozentualen Breite zB experimentieren. 70% – Johny
Ich glaube nicht, dass dies die Frage beantwortet, weil die erste Option ein Offset ist (nicht wirklich zentriert) und die zweite Option kein Bootstrap verwendet. – felwithe