Как реализовать гибкие, независимо прокручивающиеся панели в Bootstrap 3?

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

Мне удалось реализовать такой макет в CSS с помощью absolute positioning и overflow свойств, см. этот JSFiddle: http://jsfiddle.net/XLceP/

Это здорово, однако я также пытаюсь использовать Bootstrap (3.1.1), чтобы сделать сайт отзывчивым и для компонентов/стилей. Однако я не понимаю, как это сделать.

В принципе, я бы идеально хотел использовать соглашения Bootstrap (классы столбцов и т.д.), чтобы сделать это так, чтобы на мобильных экранах правая панель рушилась ниже левой панели (или полностью исчезает) для обычной вертикальной компоновки, причем оба занимая всю ширину. Однако это невозможно сделать при использовании позиционирования absolute для большей компоновки экрана.

Как я могу попытаться решить эту проблему?

Ответы

Ответ 1

Обновление 2019

Бутстрап 4

Теперь, когда Bootstrap 4 использует flexbox, вы можете использовать этот макет с помощью flex-grow и новых классов утилит переполнения. Это минимизирует дополнительный CSS, который был необходим раньше в BSv3...

<div class="container-fluid d-flex flex-column flex-grow-1 vh-100 overflow-hidden">
    <nav class="navbar navbar-light bg-light navbar-expand-md px-0 flex-shrink-0">
        <a class="navbar-brand" href="#">App</a>
        <ul class="navbar-nav">
            <li class="nav-item"><a href="#" class="nav-link">Nav</a></li>
        </ul>
    </nav>
    <div class="row flex-grow-1 overflow-hidden">
        <div class="col-2 mh-100 overflow-auto py-2">
            <h6>Sidebar</h6>
            <ul class="nav flex-column">
                <li class="nav-item">
                    <a class="nav-link active" href="#">Link</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>
            </ul>
        </div>
        <div class="col mh-100 overflow-auto py-2">
            <h3>Body content</h3>
        </div>
    </div>
    <div class="row flex-shrink-0 bg-light">
        <div class="col-12 py-2">
            <p>Footer ...</p>
        </div>
    </div>
</div>

https://www.codeply.com/go/LIaOWljJm8

Bootstrap 3 (оригинальный ответ)

Вы можете использовать медиазапрос CSS, чтобы "отключить" абсолютное позиционирование на экранах мобильных устройств. Это позволит Bootstrap быстро реагировать...

@media (min-width: 768px){
  #left {
    position: absolute;
    top: 0px;
    bottom: 0;
    left: 0;
    width: 75%;
    overflow-y: scroll; 
  }

  #right {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    overflow-y: scroll;
    width: 25%;
  }
}

Demo: http://www.bootply.com/126137

Ответ 2

Я разблокировал Skelly bootply здесь при использовании col-xs-12 и hidden-xs.

  <div class="col-xs-12 col-sm-6" id="left">
      <p>Left contents</p>
  </div>   
  <div class="hidden-xs col-sm-6" id="right">
      <p>Right contents</p>
  </div>

Я предпочитаю это, потому что он избегает медиа-запросов в файле css.

Ответ 3

Вам не нужен Bootstrap, чтобы делать то, что вы хотите. Вы можете просто изменить свой существующий CSS следующим образом:

#left {
  float: left;
  width: 75%;
  height: 100px;
  overflow-y: scroll;
  background-color: #FC6E51;
  text-align: center;
}

#right {
  float: left;
  overflow-y: scroll;
  height: 100px;
  width: 25%;
  background-color: #4FC1E9;
  text-align: center;
}

И затем, в вашем медиа-запросе для мобильных экранов, сделайте как #left, так и #right flow: none, width: 100% и height: auto;

Если вы действительно хотите использовать Bootstrap, просто поставьте оба #left и #right в следующей структуре:

<div class="row">
    <div class="col-md-8" id="left">Your Code Here</div>
    <div class="col-md-4" id="right">Your Code Here</div>
</div>