Bootstrap3 - обеспечение данных, сгруппированные правильно реагировать сетки

Question

Я пытаюсь достичь следующего макета в Bootstrap 3, преобразовывая старую схему на основе таблицы То'са Bootstrap отзывчивых сеток:

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

С 1а через с того связанных данные, должны быть сгруппированы вместе, в этом случае адресные данные, например

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

Вы можете сделать это, используя строку с двумя столбцами. Один столбец для информации адреса, другой столбец для оставшейся информации.

Затем, используя встроенную компоновку формы загрузки, вы можете автоматически нанести текст под меткой на мобильных устройствах.

Вот пример 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>