So zentrieren Sie die Rasterspalten (col-md-4 & col-md-8)

Question

Ich verwende Bootstrap, um eine Benutzerprofilseite zu erstellen, auf der sich das Bild auf der linken Seite und Benutzerdetails auf der rechten Seite befinden Seite.

habe ich es auf folgende Weise:

<div class="row"> 

     <!-- Col 1 --> 

     <div class="col-md-4 col-xs-6"> 
      <div> 
       <img ..> 
       <h2>Name of the user</h2> 
       Sample text<br> 
       <a href="#"><img src="..."></a> 
       <a href="#"><img src="..."></a> 
      </div> 
     </div> 

     <!-- Col 2 --> 

     <div class="col-md-4 col-xs-6"> 
      <div> 
       <ul class="nav nav-tabs" role="tablist"> 
        <li>...</li> 
       </ul> 
      </div> 
     </div> 
</div> 

Unter dem Bild des Benutzers, wird er seinen/ihren Namen hat, durch seine/ihre aktive Teilnahme an der Gemeinschaft gefolgt, und dann über den Link gefolgt zu seinen sozialen Medien.

Wenn ich es in Desktop anzeigen, sieht es gut aus. Wenn ich es jedoch in mobilen Geräten anzeigen möchte, wird der gesamte Inhalt der ersten Spalte nach links ausgerichtet. Ich möchte, dass das Zentrum so ausgerichtet wird, dass es richtig aussieht. Wie kann ich das machen? Oder mache ich einen Fehler?

Answer 1

Die Klasse, die Sie brauchen, ist center-block

Answer 2

Try col-xs-4 CSS-Klasse in den DIVs zu setzen:

<div class="col-md-4 col-xs-4"> 

Auf diese Weise wird das Verhalten bei mobilen Geräten die gleiche Desktop sein.