Wie man einen zentrierten bootstrap layout

Brauche ich zum erstellen einer responsive layout, und ich habe bootstrap vor, aber ich habe nie wirklich versucht dies. Die volle Breite von designs ist reichlich einfach, aber ich will ein layout mit zwei Spalten, die sagen würden.. haben eine max Breite von 900px zusammen.

Beispiel, was ich versuche zu tun, kann tatsächlich gesehen werden hier auf stackoverflow. Es gibt zwei Spalten auf dieser Seite, aber beide Spalten zentriert auf der Seite, jetzt mit Platz Links und rechts. Ich brauche nur, dass (und reagieren, wie Sie gut für kleinere Bildschirme).

  • Herzlich willkommen auf Stack Overflow. Gut zu sehen, die Sie vorgelegt haben, eine Qualität, die Frage, aber diese Seite ist nicht ein coding-service. Bitte Fragen Sie nicht, wie etwas umzusetzen ist wie diese. Als pro SO richtige Etikette, Sie sollten zeigen, was Sie versucht haben und bitten um Hilfe bei der Verbesserung Ihrer code oder die Lücken ausfüllen. Wir werden gerne versuchen zu helfen, Sie reparieren Ihren code aber nicht 🙂
InformationsquelleAutor Ampix0 | 2013-09-15
  1. 2

    Vorausgesetzt, Ihr container hat die id container Sie können es, indem Sie auto linken und rechten Rand wie:

    #container { 
   margin: 0 auto;
}

    Die Breite einer Standard-bootstrap grid ist 960px und ist bereits standardmäßig zentriert dargestellt. Sie haben nur zu ordnen Sie eine Klasse namens container wie

    <div class="container">
     <!-- The begin your row -->
     <div class="row">
          <div class="span8">
               Demo right part of stackoverflow
          </div>
          <div class="span4">
               Demo left part of stackoverflow         
          </div>
     </div>
</div>
    • danke, das half, aber warum nicht center automatisch wie sagte @Alax Menon ?
    InformationsquelleAutor Starx
  2. 0

    Wenn Sie erstellen Ihr layout mit Bootstrap grid-system, wird es automatisch an die div-container horizontal zentrieren, gibt es keine Notwendigkeit, irgend etwas. Folgen Sie einfach diesen code:

    <div class="container">
     <div class="row">
          <div class="span8">
               <!-- left column -->
          </div>
          <div class="span4">
               <!-- right column -->        
          </div>
     </div>
</div>

    Weiter Sie können sich diese Seite um zu wissen, wie Bootstrap-grids arbeitet - http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-grid-system.php

    InformationsquelleAutor Alex
Schreibe einen Kommentar