Как создать фиксированную компоновку боковой панели с помощью Bootstrap 4?

enter image description here

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

Идем с базовым примером:

<div class="container">
  <div class="row">
    <div class="col-m-4" id="sticky-sidebar">
      Sidebar
    </div>
    <div class="col-m-8" id="main">
      Main Area
    </div>
  </div>
</div>

Можно получить этот макет, но все становится сложнее, когда я заявляю:

.sidebar {
position: fixed // or absolute
}

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

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

Ответы

Ответ 1

Обновлено 2018

Вот обновленный ответ для последней версии Bootstrap 4.0.0. Эта версия имеет классы, которые помогут вам создать липкую или фиксированную боковую панель без дополнительного CSS....

Используйте sticky-top:

<div class="container">
    <div class="row py-3">
        <div class="col-3 order-2" id="sticky-sidebar">
            <div class="sticky-top">
                ...
            </div>
        </div>
        <div class="col" id="main">
            <h1>Main Area</h1>
            ...   
        </div>
    </div>
</div>

Демо: https://www.codeply.com/go/O9GMYBer4l

или, используя position-fixed:

<div class="container-fluid">
    <div class="row">
        <div class="col-3 px-1 bg-dark position-fixed" id="sticky-sidebar">
            ...
        </div>
        <div class="col offset-3" id="main">
            <h1>Main Area</h1>
            ...
        </div>
    </div>
</div>

Также см:
Фиксированный и прокручиваемый столбец в бутстрап 4 flexbox
Исправленное положение Bootstrap col
Как использовать позицию CSS, чтобы сохранить боковую панель, видимую с помощью Bootstrap 4
Создайте отзывчивый "ящик" боковой панели навигатора в Bootstrap 4?

Ответ 2

что-то вроде этого?

#sticky-sidebar {
position:fixed;
max-width: 20%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-xs-4">
      <div class="col-xs-12" id="sticky-sidebar">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
      </div>
    </div>
    <div class="col-xs-8" id="main">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
  </div>
</div

Ответ 3

Я использую JS, чтобы исправить меню боковой панели. Я пробовал много решений с помощью CSS, но это самый простой способ решить эту проблему, просто добавив JS, добавив и удалив собственный класс BootStrap: "position-fixed".

JS:

var lateral = false;
function fixar() {

            var element, name, arr;
            element = document.getElementById("minhasidebar");

            if (lateral) {
                element.className = element.className.replace(
                        /\bposition-fixed\b/g, "");
                lateral = false;
            } else {

                name = "position-fixed";
                arr = element.className.split(" ");
                if (arr.indexOf(name) == -1) {
                    element.className += " " + name;
                }
                lateral = true;
            }

        }

HTML:

Боковая панель:

<aside>
        <nav class="sidebar ">
             <div id="minhasidebar">
                 <ul class="nav nav-pills">
                     <li class="nav-item"><a class="nav-link active" 
                     th:href="@{/hoje/inicial}"> <i class="oi oi-clipboard"></i> 
                     <span>Hoje</span>
                     </a></li>
                 </ul>
             </div>
        </nav>            
</aside>

Ответ 4

Моя версия:

div#dashmain { margin-left:150px; }
div#dashside {position:fixed; width:150px; height:100%; }

<div id="dashside"></div>
<div id="dashmain">                        
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">Content</div>
        </div>            
    </div>        
</div>