Zentrieren von Text innerhalb div mit Bootstrap

Ich versuche, mich mit Bootstrap und seinem Grid-System vertraut zu machen. Im Folgenden wird mein Versuch gezeigt, eine Fußzeile zu erstellen. Ich möchte nicht alle 12 Spalten verwenden, im Moment sieht es gut aus - aber aus irgendeinem Grund kann ich die Listenelemente im div nicht zentrieren. Ich habe versucht, mit Google Dev-Tools zu spielen, kann aber nicht wirklich den Grund dafür finden.Zentrieren von Text innerhalb div mit Bootstrap

.wrapper{ 
    width:80%; 
    margin:0 auto; 
} 
.footer{ 
    margin:0 auto; 
    text-align:center; 
}

HTML

<div class="row footer"> 
      <div class="wrapper clearfix"> 
       <div class="col-md-2 "> 
        <ul> 
         <li>Bob</li> 
         <li>Bob</li> 
         <li>Bob</li> 
         <li>Bob</li> 
         <li>Bob</li> 
        </ul> 
       </div> 
       <div class="col-md-2"> 
        <ul> 
         <li>Bob</li> 
         <li>Bob</li> 
         <li>Bob</li> 
         <li>Bob</li> 
         <li>Bob</li> 
        </ul> 
       </div> 
       <div class="col-md-2"> 
        <ul> 
         <li>Bob</li> 
         <li>Bob</li> 
         <li>Bob</li> 
         <li>Bob</li> 
         <li>Bob</li> 
        </ul> 
       </div> 
       <div class="col-md-2"> 
        <ul> 
         <li>Bob</li> 
         <li>Bob</li> 
         <li>Bob</li> 
         <li>Bob</li> 
         <li>Bob</li> 
        </ul> 
       </div> 
      </div> 
     </div>

Quelle

2017-08-27 J.Doe

Dies scheint wie erwartet zu funktionieren, was wollen Sie erreichen? Die Elemente in ihren Listen zentriert oder die Listen in der Fußzeile zentriert? –

'col- *' sollte die unmittelbaren Kinder von 'row' sein – ZimSystem

Col- * s sind auf float gesetzt: Links im Bootstrap müssen wir einen Reset durchführen Check the link https://jsfiddle.net/7acynjLj/1/ –

Verwendung

.footer ul { 
    display: grid; 
    justify-content: center; 
}

demo

Quelle

2017-08-27 14:46:48

Zentrieren von Text innerhalb div mit Bootstrap

Antwort

Verwandte Themen