Bootstrap 3 网格样式问题与对齐答案

【问题标题】：Bootstrap 3 Grid Style Issue with alignmentBootstrap 3 网格样式问题与对齐
【发布时间】：2015-01-29 16:20:24
【问题描述】：

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

如您所见，我需要将第 2 列和第 3 列对齐 - 因为这对应于标签和值。

我正在使用带有 c# 的 ASP.Net 应用程序。值（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。

【问题讨论】：

标签： asp.net css twitter-bootstrap twitter-bootstrap-3

【解决方案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 时，bootstrap 会占用一个新行。

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

【讨论】：