如何使关于我的布局使用引导

-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呢？ –

如何使关于我的布局使用引导

回答

相关问题