Bootstrap 3 Grid Style问题与对齐

Question

我正在尝试创建一个使用Bootstrap-3的人出现或两个屏幕出现的人。 我试图创造一些像下面

图像＃1 http://i.imgur.com/Fj1NCbV.jpg?1

正如你可以看到我需要的列2和第3栏对齐 - 因为这相当于标签和值。

我使用ASP.Net应用程序与C＃。值（Jason等）将会使用c＃从后端动态添加。

现在即时通讯使用下面的代码 -

<div class="container"> 
     <div class="row"> 
      <%--img--%> 
      <div class="col-md-2"> 
       <div class="row"> 
        <img src="../../images/Person_img.png" alt="" /> 
       </div> 
      </div> 
      <%--tr #--%> 
      <div class="col-md-3"> 
       <div class="row"> 
        <div class="col-md-6"> 
         <%--1--%> 
         <div class="row"> 
          <div class="col-md-1"> First Name</div> 
         </div> 

         <%--2--%> 
         <div class="row"> 
          <div class="col-md-1"> Last Name </div> 
         </div> 
         <%--3--%> 
         <div class="row"> 
          <div class="col-md-1"> Email</div> 
         </div> 
         <%--4--%> 
         <div class="row"> 
          <div class="col-md-1"> Address</div> 
         </div> 
        </div> 
        <div class="col-md-6"> 
         <%--1-v--%> 
         <div class="row"> 
          <div class="col-md-2"> Jason </div>        
         </div> 
         <%--2-v--%> 
         <div class="row"> 
          <div class="col-md-2"> Bourne</div>       
         </div> 
         <%--3-v--%> 
         <div class="row"> 
          <div class="col-md-2"> Jasonbourne@test.com</div> 
         </div> 
         <%--4-v--%> 
         <div class="row"> 
          <div class="col-md-2"> 
           Street # 1, 
           House No 1, 
           City, 
           State, 
           Country 
          </div> 
         </div> 

        </div> 
       </div> 
      </div> 
      </div> 
      </div> 

请告诉我发生的事情是 -

• 标签没有被与价值观相一致。

• 而且每当存在空间（名字）的，两个 '第一' 和
  '名称' 似乎出现在两个不同的行

影像＃2 http://i.imgur.com/rvW5Drg.jpg

莫非你建议我去哪里错了。

ps：我没有足够的指向图像，所以即时通讯使用imgur。

Answer 1

对于形式，需要在概念上调整你的HTML如下：

row 
col, col 

row 
col, col 

row 
col, col 

.... 

正如在山坳的内容范围不断扩大，这将推动下一行。

这里是你展示如何小提琴：

http://jsfiddle.net/nwo5v8yw/

其实我已经去了这一点：

 <div class="row"> 
      <div class="col-sm-6">label1</div> 
      <div class="col-sm-6">foo bar baz foo bar baz foo bar baz foo bar baz foo bar baz foo bar baz foo bar baz foo bar baz foo bar baz foo bar baz foo bar baz foo bar baz foo bar baz foo bar baz foo bar baz foo bar baz </div> 
      <div class="col-sm-6">label2</div> 
      <div class="col-sm-6">value2</div> 
      <div class="col-sm-6">label3</div> 
      <div class="col-sm-6">value3</div> 
     </div> 

自举需要一个新行时山坳算他12

注意：如果您有小显示器，将JS小提琴中间滑块向左拖动;）