如何使關於我的佈局使用引導

-1

General Info. 

Name:     XYZ XYZ 

Age:     22 

Gender:    Male 


Contact Info. 

Email:    [email protected] 

Phone number:   923XXXXXXXXX

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

來源

2015-06-22 Raj

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

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

使用

或

也許......？ –

回答

一種方式會像下面：

<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>

來源

2015-06-22 11:17:44

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

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

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

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

<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>

來源

2015-06-22 11:42:19

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

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

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

來源

2015-06-22 13:15:23

bootply也許？ Jsfiddle呢？ –

相關問題