Question

我尝试使用Bootstrap 4创建类似截图的布局，但我在修复侧边栏并同时实现此布局方面遇到了一些问题。

采用一个基本的例子：

import urllib
if urllib.urlopen('http://www.fakedomain.com/fakeImage.jpg').code == 200:
  print 'File exists'

有可能获得这种布局，但是一旦我宣布：

，事情变得棘手

<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>

一旦我使侧栏粘滞，主 div开始在侧边栏后面后面显示而不是旁边。当然，可以宣布一些保证金并将其推回原来的位置，但这会使响应能力变得复杂。

我觉得我错过了一些东西，我读了Bootstrap 4文档，但我找不到一种简单的方法来实现这种布局。

Answer 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>

另见：
Fixed and scrollable column in Bootstrap 4 flexbox
Bootstrap col fixed position
How to use CSS position sticky to keep a sidebar visible with Bootstrap 4
Create a responsive navbar sidebar "drawer" in Bootstrap 4?

Answer 2

这样的事情？

＆＃13;

#sticky-sidebar {
position:fixed;
max-width: 20%;
}

＆＃13;

<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's 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's 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

＆＃13;

Answer 3

我在代码中使用了这个

<div class="sticky-top h-100">
    <nav id="sidebar" class="vh-100">
        ....

这会使您的侧边栏高度变为100％并固定在顶部。

Answer 4

我正在使用J.S.修复侧边栏菜单。我已经使用CSS尝试了很多解决方案，但这是解决它的最简单方法，只需添加J.S.添加和删除本地BootStrap类：“位置固定”。

J.S。：

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>

Answer 5

我的版本：

RDD[Array[String]] = (Array(Array("a", "b", "d"), Array("a", "c", "e")))

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

如何使用Bootstrap 4创建固定侧边栏布局？

5 个答案: