1. Dom
  2. Pytanie i odpowiedź
  3. Centrum Zawartość kontenera wierszowego Bootstrap

Centrum Zawartość kontenera wierszowego Bootstrap

2012-11-19 14 views
21

Mam poniższy kod i chciałbym wyśrodkować "dobrze" elementy zewnętrznego "rzędu" elementu div. Próbowałem różnych podejść, takich jak text-align: center (które tylko centruje tekst, a nie wewnętrzne elementy DIV.)Centrum Zawartość kontenera wierszowego Bootstrap

Oto jsfiddle. Chodzi o to, że dostaję stronę "dobrze" płytek i że . po 4 lub tak owija Ale jeśli jest to mniej niż 4, powinny one wyświetlane centralnie na stronie

<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>

Źródło

2012-11-19 Gregg

Odpowiedz

44

Rozwiązałem to, wykonując następujące czynności:.

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

Źródło

2012-11-19 22:35:02 Gregg

+1

Wystarczy prowadził test, należy zauważyć, że tylko style należy dodać. –

9

Spróbuj tego, to działa !

<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>

Następnie w css określić szerokość środkowej div i centrum w dokumencie:

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

Źródło

2015-04-04 13:21:22 Ezequiel

-1

Ustawić pojemnik wewnątrz rzędu, a będzie to wyśrodkować zawartość dla Ciebie.

<body class="container-fluid"> 
    <div class="row"> 
     <div class="container"> 
      content goes here... 
     </div> 
    </div> 
</body>

Źródło

2017-06-05 21:43:26

Powiązane problemy

 Powiązane problemy