Bootstrap3 - 確保響應電網正確分組數據

Question

我想實現在引導3以下的佈局，將一張舊桌子基於佈局來引導的響應格：到c

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

爲1A被相關數據需要分組在一起，在這種情況下地址數據，例如

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列的行來做到這一點。一列是地址信息，另一列是其餘信息。

然後，通過使用內置的表格佈局的引導程序，您可以將文本自動放置在移動設備上的標籤下方。

下面是一個例子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>