У меня проблема с системой сетки Bootstrap на моем новом веб-сайте/странице-сервисов (kenpils.se.
Вместо этого я бы предпочел 3 строки с 2 столбцами, чтобы текст в столбцах лучше читался на планшете. Сейчас столбцы сужаются из-за значка слева от каждого столбца.
Насколько я понимаю, каждая строка представляет собой один div, что затрудняет скольжение вверх по «коммерческой колонке» рядом с «редакционной колонкой». Между двумя рядами также есть класс Division30.
Был бы признателен за совет.
Решение этой проблемы, которое я нашел лучшим, заключается в дублировании вашего контента в макете планшета. затем используйте visible-* (задокументировано здесь) атрибуты класса, чтобы скрыть и сделать видимым определенный контент для определенных разрешений экрана. . Вам нужно будет добавить visible-* атрибуты класса к <div class="row"> и изменить col-sm-4 на col-md-4, см. ниже:
<div class="row visible-lg visible-md">
<div class="col-md-4">
<!-- Your Content 1-->
</div>
<div class="col-md-4">
<!-- Your Content 2-->
</div>
<div class="col-md-4">
<!-- Your Content 3-->
</div>
</div>
<div class="row visible-lg visible-md">
<div class="col-md-4">
<!-- Your Content 4-->
</div>
<div class="col-md-4">
<!-- Your Content 5-->
</div>
<div class="col-md-4">
<!-- Your Content 6-->
</div>
</div>
Затем добавьте в свой код раздел, дублирующий информацию и скрывающий ее на больших разрешениях экрана. Смотри ниже:
<div class="row visible-sm visible-xs">
<div class="col-sm-6">
<!-- Your Content 1-->
</div>
<div class="col-sm-6">
<!-- Your Content 2-->
</div>
</div>
<div class="row visible-sm visible-xs">
<div class="col-sm-6">
<!-- Your Content 3-->
</div>
<div class="col-sm-6">
<!-- Your Content 4-->
</div>
</div>
<div class="row visible-sm visible-xs">
<div class="col-sm-6">
<!-- Your Content 5-->
</div>
<div class="col-sm-6">
<!-- Your Content 6-->
</div>
</div>
Это обеспечит желаемое форматирование. Надеюсь это поможет.
ПРИМЕЧАНИЕ. ПРЕДСТАВЛЕННОЕ НИЖЕ РЕШЕНИЕ ВООБЩЕ НЕ ИЗМЕНЯЕТ МАКЕТ, как вам нужно. Он предлагает альтернативное решение!
<div class="col-services">
<div class="row">
<div class="col-sm-4></div>
<div class="col-sm-4></div>
<div class="col-sm-4></div>
</div>
</div>
Это означает, что разрыв не произойдет, пока ширина не уменьшится ниже зоны планшета!
col-sm-4 -> разрыв после ширины зоны планшета col-md-4 -> разрыв после нормальной ширины рабочего стола
Замените его на
<div class="col-services">
<div class="row">
<div class="col-md-4></div>
<div class="col-md-4></div>
<div class="col-md-4></div>
</div>
</div>
Это гарантирует, что разрыв произойдет на самом уровне планшета!
