Bootstrap - колонки строк, но остаются отзывчивыми

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

На больших устройствах, расположение должно быть следующим с 3 параллельных сеансов, но час слоты выравнивания друг с другом через колонки:

Это будет отличаться от мобильного зрения, где сидят столбцы ниже друг друг и горизонтальное выравнивание игнорируется:

Я пытаюсь использовать таблицу в каждой колонке, но быстро понял, что идея была ошибка редактор Различные другие попытки сделать столбцы одинаковой высоты также не удались.

Большая проблема заключается в том, что содержимое каждой ячейки может варьироваться в широких пределах.

источник

2016-03-08 Josh Luke Blease

Нужно ли показывать весь контент в каждой ячейке? С фиксированной высотой вы можете выполнить штабелирование, вставляя каждый день в .col-lg-4, чтобы они складывались на меньшем, чем в окне просмотра lg – David

было бы хорошо, если вы поделитесь своим кодом с нами. –

Ну, я думаю, что первая практическая проблема, с которой вы столкнетесь, - это сетка Bootstrap не делится на 5 и 7 (при условии, что число календарных дней в неделю), если вы не посетите страницу настройки сборки - http://getbootstrap.com/customize/ – ThisClark

Вы пробовали вложенные столбцы? Вы можете поместить одну строку из трех столбцов, а затем вставить другие div внутри этих столбцов. Here's a Bootply. Вы можете видеть, что столбцы стека в мобильном. Вот код, это относительно просто:

<div class="container"> 

    <div class="row"> 
     <div class="col-xs-12 col-md-4"> 
     <div class="col-xs-12 col-top"></div> 
     <div class="col-xs-12 col-left"></div> 
     <div class="col-xs-12 col-left"></div> 
     <div class="col-xs-12 col-left"></div> 

     </div> 
     <div class="col-xs-12 col-md-4"> 

     <div class="col-xs-12 col-top"></div> 
     <div class="col-xs-12 col-mid"></div> 
     <div class="col-xs-12 col-mid"></div> 
     <div class="col-xs-12 col-mid"></div> 

     </div> 
     <div class="col-xs-12 col-md-4"> 

      <div class="col-xs-12 col-top"></div> 
      <div class="col-xs-12 col-right"></div> 
      <div class="col-xs-12 col-right"></div> 
      <div class="col-xs-12 col-right"></div> 

     </div> 
    </div> 


</div>

ОБНОВЛЕНО для размещения белых блоков. На большом дисплее вы можете видеть, что я только что использовал CSS, чтобы сделать белые блоки белыми, а когда вы просматриваете их на мобильном телефоне, эти блоки скрыты. Here's the updated Bootply, и вот код.

<div class="container"> 
    <div class="row"> 
     <div class="col-xs-12 col-md-4"> 
     <div class="col-xs-12 col-top"></div> 
     <div class="col-xs-12 col-left"></div> 
     <div class="col-xs-12 col-mid visible-lg" id="white"></div> 
     <div class="col-xs-12 col-left"></div>  
     </div> 
     <div class="col-xs-12 col-md-4"> 
     <div class="col-xs-12 col-top"></div> 
     <div class="col-xs-12 col-mid visible-lg" id="white"></div> 
     <div class="col-xs-12 col-mid"></div> 
     <div class="col-xs-12 col-mid visible-lg" id="white"></div> 
     </div> 
     <div class="col-xs-12 col-md-4"> 
      <div class="col-xs-12 col-top"></div> 
      <div class="col-xs-12 col-topright"></div> 
      <div class="col-xs-12 col-bottomright"></div> 
     </div> 
    </div> 
</div>

источник

2016-03-08 18:47:01 hcgriggs

Проблема в том, что он не учитывает пробелы, где, по-видимому, нет событий календаря для заполнения. – ThisClark

Как отметил @ThisClark, ваш пример не сможет обрабатывать пробел –

Я отредактировал свое оригинальное сообщение. Я использовал класс 'visible', чтобы белые блоки были видны только в браузере. Это больше соответствует тому, что вы ищете? – hcgriggs

Bootstrap - колонки строк, но остаются отзывчивыми

ответ

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