Bootstrap-Gitter ausrichten

Question

Also ich kodiere eine Website mit Bootstrap, und ein einfaches Problem plagt mich. Grundsätzlich werde ich einen Container haben, mit einer Reihe innen, und innerhalb davon habe ich 3 col-lg-4 Spalten. Mein Problem ist, dass die Spalten nicht zentriert sind, noch füllen sie die Zeile. Beispiel http://www.connornorvell.com/misc/stack-example.png

Wie Sie sehen können, sollte der Titel "johnny" die rechte Seite des Bildschirms berühren und der Titel "rafael" sollte zentriert sein.

Ich habe versucht, Zeilen-zentrierte und col-zentrierte Klassen zu meinen divs hinzuzufügen, aber es funktioniert nicht (zeilenzentriert zentriert nur den Text).

Hier ist der Code:

<div class="container breathing-room-bottom"> 
    <div class="row"> 
    <div class="col-lg-4"> 
     <p class="sans" style="font-weight:500; text-align:;">Connor Norvell 
      <br> 
      <span2 style="color:#828282;">Art Director 
      <br>(555) 555 - 5555 
      <br>connor@mggall.com</span2> 
     </p> 
     </div> 
     <div class="col-lg-4"> 
     <p class="sans" style="font-weight:500; text-align:;">Rafael De La Vega 
      <br> 
      <span2 style="color:#828282; font-weight:500;">Art Director 
      <br>(555) 555 - 5555 
      <br>rafael@mggall.com</span2> 
     </p> 
     </div> 
     <div class="col-lg-4"> 
     <p class="sans" style="font-weight:500; text-align:;">Johnny Presslaur 
      <br> 
      <span2 style="color:#828282;">Art Director 
      <br>(555) 555 - 5555 
      <br>johnny@mggall.com</span2> 
     </p> 
     </div> 
    </div> 
</div> 

Alles ist Bootstrap, außer .sans (macht Text GROTESK) und .breathing-room-bottom (fügt 5% Polsterung auf den Boden des Behälters

Answer 1

Bootstrap hat eine Nummer. von integrierten Klassen für das Styling. Lernen sie, verwenden sie.

http://www.w3schools.com/bootstrap/bootstrap_ref_css_helpers.asp

http://getbootstrap.com/css/#type-alignment

In diesem Fall sind die Klassen, die Sie wollen: text-left, text-center, text-right

Hope this

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 
<div class="container breathing-room-bottom"> 
 
    <div class="row"> 
 
    <div class="col-xs-4 text-left"> 
 
     <p class="sans" style="font-weight:500;">Connor Norvell 
 
     <br> 
 
     <span2 style="color:#828282;">Art Director 
 
      <br>(555) 555 - 5555 
 
      <br>connor@mggall.com</span2> 
 
     </p> 
 
    </div> 
 
    <div class="col-xs-4 text-center"> 
 
     <p class="sans" style="font-weight:500;">Rafael De La Vega 
 
     <br> 
 
     <span2 style="color:#828282; font-weight:500;">Art Director 
 
      <br>(555) 555 - 5555 
 
      <br>rafael@mggall.com</span2> 
 
     </p> 
 
    </div> 
 
    <div class="col-xs-4 text-right"> 
 
     <p class="sans" style="font-weight:500;">Johnny Presslaur 
 
     <br> 
 
     <span2 style="color:#828282;">Art Director 
 
      <br>(555) 555 - 5555 
 
      <br>johnny@mggall.com</span2> 
 
     </p> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

Ich glaube, Sie wollen text-align-left setzen hilft , center und right Ich habe einen Plunkergemacht

Answer 3

Sie haben text-align zu setzen wie in dieser Geige in der ersten und letzten Spalte zu zentrieren oder die Bootstrap Ausrichtung Klasse text-center, wie in der mittleren Spalte verwenden (ich empfehle diesen Ansatz).

https://jsfiddle.net/michelefenu/3eL4f1a7/