Bootstrap 3 Сетка Компоновка Выпуск на Tablet

У меня есть проблема с энергосистемой Bootstrap на моем новом сайте/услуг-странице (kenpils.se.Bootstrap 3 Сетка Компоновка Выпуск на Tablet

Я предпочел бы 3 строки с 2 колонками вместо того, чтобы сделать текст в колонках лучше читаемый на планшете. Сейчас столбцы должны быть узкими из-за значка в левой части каждого столбца.

Насколько я понимаю, каждая строка представляет собой один div, что затрудняет продвижение «коммерческого столбца» «рядом с« редакционной колонкой ». Между двумя строками также имеется разделительный класс 30.

Будет ли appre Некоторые советы.

источник

2014-02-09 user3289880

Решение, которое я нашел, работает лучше всего, чтобы дублировать ваш контент в планшетах планшета. затем используйте атрибуты класса visible-* (documented here), чтобы скрыть и сделать видимый конкретный контент определенным разрешениям экрана. Вам нужно будет добавить 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>

Это обеспечит требуемое форматирование. Надеюсь это поможет.

источник

2014-02-09 16:33:13 theRyanMark

Ваше решение работает как шарм. Благодаря! – user3289880

Ваш прием! Это заставило меня на несколько дней, когда я занимался сайтом. Тогда, когда я понял это, я подумал «как просто». – theRyanMark

Также вы можете пометить ответ как принятый? Буду премного благодарен. – theRyanMark

ПРИМЕЧАНИЕ: НИЖЕ РЕШЕНИЕ НЕ ДОПУСКАЕТСЯ ПОСРЕДСТВОМ РАСПРЕДЕЛЕНИЯ ВСЕХ, как вам нужно. Это альтернативное решение!

<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-см-4 -> перерыв после ширины таблетки зоны Col-мкр-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>

Это гарантирует, что разрыв происходит на уровне планшета!

источник

2014-02-09 15:37:17

Bootstrap 3 Сетка Компоновка Выпуск на Tablet

ответ

Смежные вопросы