1. Zuhause
  2. Frage und Antwort
  3. Center Inhalt des Bootstrap-Zeilencontainers

Center Inhalt des Bootstrap-Zeilencontainers

2012-11-19 6 views
21

Ich habe den folgenden Code und möchte die "well" -Elemente der äußeren "Zeile" div. Ich habe versucht verschiedene Ansätze wie text-align: center (das zentriert nur den Text und nicht die inneren DIV-Elemente.Center Inhalt des Bootstrap-Zeilencontainers

Hier ist ein jsfiddle. Die Idee ist, dass ich eine Seite von "gut" Fliesen und das bekommen . nach 4 oder so wickelt es aber, wenn es weniger als 4 ist, erscheinen sie auf der Seite zentriert sollten

<body class="container-fluid"> 
    <div class="row"> 
     <div class="well span2"> 
      <div class="row"> 
       <div class="span2"> 
        Header 
       </div> 
      </div> 
      <div class="row"> 
       <div class="span2"> 
        Sub Header 
       </div> 
      </div> 

     </div> 

     <div class="well span2"> 
      <div class="row"> 
       <div class="span2"> 
        Header 
       </div> 
      </div> 
      <div class="row"> 
       <div class="span2"> 
        Sub Header 
       </div> 
      </div> 
     </div> 
    </div> 
</body>

Quelle

2012-11-19 Gregg

Antwort

44

ich dies, indem sie die folgenden gelöst:.

<body class="container-fluid"> 
    <div class="row"> 
     <div class="span6" style="float: none; margin: 0 auto;"> 
      .... 
     </div> 
    </div> 
</body>

Quelle

2012-11-19 22:35:02 Gregg

+1

nur ein Test lief, sollte beachtet werden, dass nur die Stile hinzugefügt werden müssen. –

9

Versuchen sie dieses, es funktioniert !

<div class="row"> 
    <div class="center"> 
     <div class="col-xs-12 col-sm-4"> 
      <p>hi 1!</p> 
     </div> 
     <div class="col-xs-12 col-sm-4"> 
      <p>hi 2!</p> 
     </div> 
     <div class="col-xs-12 col-sm-4"> 
      <p>hi 3!</p> 
     </div> 
    </div> 
</div>

Dann in CSS definiert die Breite des Mittel div und in der Mitte in einem Dokument:

.center { 
    margin: 0 auto; 
    width: 80%; 
}

Quelle

2015-04-04 13:21:22 Ezequiel

-1

Ein Behälter in Ihrer Reihe, und es wird den Inhalt für Sie zentriert.

Quelle

2017-06-05 21:43:26

 Verwandte Themen

  • Keine verwandten Themen^_^