引导 3 网格样式对齐问题

Question

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

图片 # 1http://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"> [e-mail]</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>

正在发生的事情是——

• 标签未与值对齐。

• 此外，只要有空格（名字），"第一个"和
  "名称"似乎出现在两行不同的行中

图片 # 2https://i.stack.imgur.com/VlVsg.jpg

你能告诉我我哪里出了问题吗？

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

Answer 1

对于表单，您需要在概念上重新构建 HTML，如下所示：

row
col, col
row
col, col
row
col, 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>

当 col 数他的 12 时，引导程序会采取新的一行。

注意：如果你有一个小的显示器;)，请将JS小提琴中间滑块向左拖动