web-dev-qa-db-ja.com

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
}

サイドバーをスティッキーにすると、maindivがbehindサイドバーではなく横に表示され始めます。もちろん、マージンを宣言して元の位置にプッシュバックすることもできますが、応答性が複雑になります。

何か不足しているように感じます。Bootstrap 4ドキュメントを読みましたが、このレイアウトを実現する簡単な方法が見つかりませんでした。

htmlcsstwitter-bootstrapbootstrap-4
31
cinnaroll45

2018年に更新

最新のBootstrap 4.0.0に対する更新された回答を次に示します。このバージョンには、stickyまたはfixed sidebarの作成に役立つクラスがあります余分な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

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

参照：
Bootstrap 4フレックスボックスの固定およびスクロール可能な列
Bootstrap col fixed position
CSS位置スティッキーを使用して、Bootstrap 4でサイドバーを表示する方法
Bootstrap 4？にレスポンシブnavbarサイドバー「ドロワー」を作成します

47
Zim

このようなもの？

#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'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
6
GvM

私はJSを使用していますサイドバーメニューを修正します。私はCSSで多くのソリューションを試しましたが、それを解決する最も簡単な方法です、JSを追加するだけですネイティブ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>
0
Michel Fernandes