Bootstrap3 - 确保数据在响应式网格中正确分组

Question

我正在尝试在 Bootstrap 3 中实现以下布局，将基于 table 的旧布局转换为 Bootstrap 的响应式网格：

label1a: value1a    label2: value2
label1b: value1b    label3: value3
label1c: value1c    label4: value4

1a 到 c 是需要组合在一起的相关数据，在这种情况下是地址数据，例如

Address1: [data1]    Contact:  Joe Bloggs
Town:     [data2]    Position: Developer

等等

我遇到的问题是在较小的视口中我希望地址数据保持显示在单个部分中而不是与其他数据散布，即

Address1:
[data1]
Town: 
[data2]
Contact:
Joe Bloggs
Position:
Developer

但结果是

Address1:
[data1]
Contact:
Joe Bloggs
Town: 
[data2]
Position:
Developer

鉴于代码，这并不奇怪：

                    <div class="row">                         
                             <label for="Address" class="control-label col-sm-2">Address:</label>     
                            <div class="col-sm-4"><%# DataBinder.Eval(Container.DataItem, "Address1")%> <%# DataBinder.Eval(Container.DataItem, "Address2") %></div>                         
                             <label for="Contact" class="control-label col-sm-2">Contact:</label>     
                            <div class="col-sm-4"><%# DataBinder.Eval(Container.DataItem, "Name")%></div>                                                 
                     </div>    

                     <div class="row">
                             <label for="Town" class="control-label col-sm-2">Town:</label>     
                            <div class="col-sm-4"><%# DataBinder.Eval(Container.DataItem, "Address3")%></div>
                             <label for="Position" class="control-label col-sm-2">Position:</label>     
                            <div class="col-sm-4"><%# DataBinder.Eval(Container.DataItem, "Position")%></div>                        
                      </div>

这一定是一个相当常见的场景，所以希望是一些简单的东西。我显然可以变通并更改布局，但最好在 Bootstrap 中知道如何最好地实现这一点。谢谢。

Answer 1

您可以使用一行两列来完成此操作。一栏为地址信息，另一栏为剩余信息。

然后通过使用 bootstrap 的内置表单布局，您可以在移动设备上将文本自动放在标签下方。

这是一个示例 bootply：http://www.bootply.com/l2lxFK0bCV

<div class="row">
  <div class="col-sm-6 form-horizontal">
    <div class="form-group">
      <label class="control-label col-sm-2">Address 1</label>
      <div class="col-sm-10">
        <p class="form-control-static">123 Main St</p>
      </div>
    </div>
    <div class="form-group">
      <label class="control-label col-sm-2">Town</label>
      <div class="col-sm-10">
        <p class="form-control-static">London</p>
      </div>
    </div>
  </div>
  <div class="col-sm-6 form-horizontal">
    <div class="form-group">
      <label class="control-label col-sm-2">Contact</label>
      <div class="col-sm-10">
        <p class="form-control-static">Joe Bloggs</p>
      </div>
    </div>
    <div class="form-group">
      <label class="control-label col-sm-2">Position</label>
      <div class="col-sm-10">
        <p class="form-control-static">Developer</p>
      </div>
    </div>
  </div>
</div>

Bootstrap3 - 确保数据在响应式网格中正确分组

Bootstrap3 - ensuring data grouped correctly in responsive grid

twitter-bootstrap-3