Question

我正在尝试使用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。

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时，bootstrap占用一个新行。

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

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

1 个答案: