調整自舉網格

-1

所以我編寫了一個使用bootstrap的網站，一個簡單的問題困擾着我。基本上我會有一個容器，裏面有一排，裏面有3個col-lg-4列。我的問題是，專欄不是集中，也不填寫行。示例http://www.connornorvell.com/misc/stack-example.png 調整自舉網格

正如您可以看到標題「johnny」應該觸摸屏幕的右側並且標題「rafael」應居中。

我已經嘗試向我的div添加以行爲中心和以col爲中心的類，但它不起作用（以行爲中心僅居中對齊文本）。

下面是代碼：

<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>[email protected]</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>[email protected]</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>[email protected]</span2> 
     </p> 
     </div> 
    </div> 
</div>

一切都是自舉，除了.sans（使文字無襯線）和.breathing-room-bottom（添加5％填充到容器的底部

來源

2016-07-01 Connor Norvell

請刪除inapropriate措辭你的榜樣PNG，然後把它內聯。 – PaulH

引導的數。內置類造型。瞭解它們，使用它們。

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

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

在這種情況下，你想要的類別是：text-left，text-center，text-right

希望這有助於

<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>[email protected]</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>[email protected]</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>[email protected]</span2> 
 
     </p> 
 
    </div> 
 
    </div> 
 
</div>

來源

2016-07-01 21:39:22 gibberish

謝謝！我已經這樣做了，但是我想知道是否可以將文本對齊保留爲左側，但右側對齊了右側列。也許不可能。如果我不能這樣做，我只會像你說的那樣對齊它 –

@ConnorNorvell - 容器右側的右列內容*是*（http://codeply.com/go/cUHbYnytp8）。如果你想要正確的文字，你必須使用正確的文字。 – ZimSystem