Asp.net 引导3网格样式与对齐问题

我正在尝试使用Bootstrap-3创建一个出现在我的一两个屏幕上的person占位符。 我正在尝试创建如下内容

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

名字
姓
电子邮件
住址
杰森
伯恩
Jasonbourne@test.com
第1街，
一号楼，
城市
状态
国

发生的事情是——

• 标签未与值对齐

• 此外，每当有空格（名字）时，“First”和
  “Name”似乎出现在两行中

图#2

你能告诉我这个问题出在哪里吗

---

ps：我没有足够的点来发布图像，所以我使用imgur。

对于表单，您需要按照以下方式从概念上重新构造HTML：

row
col, col

row
col, col

row
col, col

....

当列中的内容展开时，它将向下推下一行

这里有一把小提琴向你展示了如何：

实际上，我是这么想的：

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

标签1
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
标签2
价值2
标签3
价值3

当col数到12时，引导程序将进入一个新的行

注意：如果您有一个小显示器，请向左拖动JS fiddle中间滑块；）