Использование Bootstrap 3.0 Как сделать так, чтобы столбец боковой панели занимал 100% ширины на мобильных устройствах?

Поэтому я пытаюсь настроить систему сетки для своего адаптивного дизайна, чтобы на настольном компьютере у меня был основной столбец слева для контента и правая боковая панель. Я хочу, чтобы боковая панель занимала 100% экрана, если она на мобильном устройстве. Я использую пример, показанный на сайте начальной загрузки здесь: http://examples.getbootstrap.com/grid/ внизу страницы -- или показано ниже...

  <div class="row">
    <div class="col-12 col-sm-8 col-lg-8">main content</div>
    <div class="col-6 col-sm-4 col-lg-4">right side bar</div>
  </div>

Столбец основного содержимого охватывает 100%, а столбец правой боковой панели — нет. Он занимает 80% экрана (я думаю). Я бы хотел, чтобы он выполнялся на 100%, если он находится на мобильном сайте, поскольку на самом деле нет смысла делать его меньше и иметь пустое пространство справа от него.


mobile responsive-design twitter-bootstrap grid-system
person daveomcd    schedule 13.08.2013    source источник

Ответы (1)


arrow_upward
7
arrow_downward

Это должно помочь вам:

<div class="row">
<div class="col-12 col-sm-8 col-lg-8 main">main content</div>
<div class="col-12 col-sm-4 col-lg-4 right">right side bar</div>
</div>

посмотреть в прямом эфире

Удачи!

person David Taiaroa    schedule 13.08.2013
comment
Сработало действительно хорошо, единственное, что я изменил в примере, это col-8 на col-12 на случай, если кто-то посмотрит на него и подумает, что это то же самое. Спасибо еще раз! - person daveomcd; 14.08.2013