Question

我想创建一个包含此布局的about me页面：

General Info.

Name:                 XYZ XYZ

Age:                  22

Gender:               Male


Contact Info.

Email:                xyz@yahoo.com

Phone number:         923XXXXXXXXX

就像facebook关于我的页面左侧的项目，它们的值在特定距离的右边但是左对齐。所以我想要的是值应该左对齐在距离左边的项目的特定距离处。那么有没有好的方法或技术来进行这种对齐而不是为每个对齐使用不同的间距？

Answer 1

这样做的一种方式如下：

<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">xyz@yahoo.com</div>
    <div class="col-sm-6">Phone number:</div><div class="col-sm-6">923XXXXXXXXX</div>
</div>

Answer 2

您可以使用以下代码以您要求的格式添加任意数量的数据。

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

Answer 3

我认为你需要一个视觉实践的结果。所以如果你使用一个可视化的bootstrap设计师会更好。 Layoutit

这将有助于您获得快速结果。对于你的项目。

如何使用bootstrap

3 个答案: