#html #css #twitter-bootstrap
#HTML #css #twitter-bootstrap
Вопрос:
У меня есть сетка начальной загрузки, которая выглядит следующим образом ( jsfiddle): 
Когда столбцы сворачиваются в небольшом окне просмотра, это выглядит так: 
Мой желаемый результат таков:
Я не уверен, какой наилучший способ заставить столбцы оставаться вместе, поскольку bootstrap конденсирует их в отдельные строки
Код:
<div class="list-group list-group-large list-group-background list-group-background-data settings">
<div class="list-group-header">
<div class="list-group-title">
<h3>Set Alerts</h3>
</div>
</div>
<div class="list-group list-group-large list-group-data">
<div class="top-row row">
<div class="col-md-3 col-sm-12"><span>Field</span></div>
<div class="col-md-3 col-sm-12"><span>Condition</span></div>
<div class="col-md-2 col-sm-12"><span>Value</span></div>
<div class="col-md-2 col-sm-12"><span>Units</span></div>
<div class="col-md-2 col-sm-12"><span>Save/Delete</span></div>
</div>
<div class="row" ng-repeat="alarm in alarms">
<div class="col-md-3 col-sm-12">
<select class="form-control">
<option>Roll</option>
<option>Pitch</option>
<option>Yaw</option>
</select>
</div>
<div class="col-md-3">
<select class="form-control">
<option>is greater than</option>
<option>is less than</option>
</select>
</div>
<div class="col-md-2">
<input type="text">
</div>
<div class="col-md-2">
<span>deg</span>
</div>
<div class="col-md-2">
<button type="button"class="btn btn-success-outline">
<i class="fa fa-check"></i> Save</button>
</div>
</div>
</div>
</div>
Комментарии:
1. Зачем вам разделять метки полей и фактические входные элементы в разных строках? Это просто плохое дизайнерское решение. Исправьте это.
2. Обычно будет более одной строки входных элементов, поэтому метки полей будут выступать в качестве заголовков на широких видовых экранах и меток на небольших видовых экранах
3. Затем повторите метки. Используйте соседние селекторы в медиа-запросах, чтобы скрыть их на больших экранах.