2015-06-22 2 views
-1

我想創建一個關於我有頁面此佈局:如何使關於我的佈局使用引導

General Info. 

Name:     XYZ XYZ 

Age:     22 

Gender:    Male 


Contact Info. 

Email:    [email protected] 

Phone number:   923XXXXXXXXX 

它像Facebook關於我的頁面,項目是在左邊,它們的值在右邊在一個特定的距離,但左對齊。 所以我想要的是,值應該左對齊在左邊的項目的具體距離。所以有沒有什麼好的方法或技術這種對齊,而不是使用不同的間距爲他們每個人?這樣做的

+0

使用列,這是Bootstrap的工作原理。您應該閱讀Bootstrap文檔。 – DavidG

+0

您是否嘗試過自己編寫任何標記? – NoobEditor

+0

使用

也許......? –

回答

2

一種方式會像下面:

<div class="row"> 
    <div class="col-sm-12">General Info</div> 
    <div class="col-sm-6">Name:</div><div class="col-sm-6">XYZ XYZ</div> 
    <div class="col-sm-6">Age:</div><div class="col-sm-6">22</div> 
    <div class="col-sm-6">Gender:</div><div class="col-sm-6">Male</div> 
    <div class="col-sm-12">Contact info</div> 
    <div class="col-sm-6">Email:</div><div class="col-sm-6">[email protected]</div> 
    <div class="col-sm-6">Phone number:</div><div class="col-sm-6">923XXXXXXXXX</div> 
</div> 
+0

好吧,這也是一個好方法,但我想出了表格是更好的方法來做到這一點。謝謝。 – Raj

+0

@Raj當一張桌子工作時,桌子是否是工作的正確工具? – hungerstar

+0

@hungerstar我想你只是問我想問的事情。 Bootstrap爲你提供了非常大的靈活性,使用table將會使渲染bootstrap的風格變得毫無用處。 –

0

您可以使用下面的代碼在你請求的格式添加儘可能多的數據。

<html> 
<style type="text/css"> 
    #wrap { 
    float:left; 
    width:300px; 
    margin:0 auto; 
    } 
    #left_col { 
    float:left; 
    width:100px; 
    } 
    #right_col { 
    Float:left; 
    width:100px; 

    } 
</style> 
<div id="wrap"> 
    <div id="left_col"> 
      <p>Name:</p> 
    </div> 
    <div id="right_col"> 
      <p>XYZ XYZ</p> 
    </div> 
    <div id="wrap"> 
     <div id="left_col"> 
       <p>Age:</p> 
     </div> 
     <div id="right_col"> 
       <p>22</p> 
     </div> 
    </div> 

+0

嘿,你是否意識到,你的代碼中沒有頭部或身體標記?並意識到你打開div並且你不關閉它們。請修復您的代碼。 –

0

你需要一個可視實際的結果,我認爲。所以如果你使用視覺引導設計器會更好。 Layoutit

這將幫助您獲得快速結果。爲你的項目。

+0

bootply也許? Jsfiddle呢? –