web-dev-qa-db-ja.com

Bootstrap 3でレスポンシブで独立してスクロールするペインを実装するにはどうすればよいですか？

私は、大きな画面に2つの独立してスクロール可能な領域（左側のメインコンテンツ領域と右側の小さなサイドバー）を配置したいWebアプリに取り組んでいます。

absoluteの配置とoverflowプロパティを使用して、CSSでこのようなレイアウトを実装することができました。次のJSFiddleを参照してください。 http://jsfiddle.net/XLceP/

これは素晴らしいことですが、サイトのレスポンシブ化とコンポーネント/スタイリングのためにBootstrap（3.1.1））も利用しようとしています。しかし私は途方に暮れていますそうする方法で。

基本的に、理想的にはBootstrap規則（列クラスなど）を使用して、モバイル画面で右ペインが左ペインの下に折りたたまれる（または完全に消える）ようにします。従来の垂直レイアウトで、両方が全幅を占めています。ただし、大画面レイアウトにabsolute配置を使用している場合は、これを行うことは不可能のようです。

どうすればこの問題に取り組むことができますか？

htmlcsstwitter-bootstrapresponsive-designtwitter-bootstrap-3
12
Inkling

2019年更新

ブートストラップ4

Bootstrap 4はflexboxを使用するので、flex-growと新しいオーバーフローユーティリティクラスを使用してこのレイアウトを行うことができます。これBSv3で以前必要だった余分なCSSを最小限に抑えます...

<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

ブートストラップ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%;
  }
}

デモ： http://www.bootply.com/126137

8
Zim

col-xs-12とhidden-xsを使用しているときに、Skellyのbootply here をフォークしました。

  <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ファイルでのメディアクエリを回避するためです。

4
David Braun

やりたいことをするのに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>
2
Yunzhou