Question

我正在尝试在Bootstrap 3中实现以下布局，将旧的基于表格的布局转换为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

您可以使用包含2列的行来执行此操作。一列用于地址信息，另一列用于剩余信息。

然后，通过使用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 - 确保数据在响应网格中正确分组

1 个答案: