web-dev-qa-db-ja.com

Bootstrap 4、リストグループを行で、フレックスボックスを使用して、ボディスクロールを使用してまたは使用せずにスクロール可能にする

Bootstrap 4を使用しています（現在はalpha-6を使用しています）。

この状況があります：

<body>

  <!-- HERE I HAVE one div automatically generated with randomly ID and class -->

  <div class="bigone">

    <div class="container-fluid">

      <div class="header">
        My header
      </div>

    </div>

    <div class="mybar">
      Nav bar
    </div>

    <div class="main">
      <div class="container-fluid">
        <div class="row">

          <div class="col-6">
            <div class="card">
              <div class="card-header">
                Card Header
              </div>
              <div class="list-group list-group-flush">
                <a href="#" class="list-group-item list-group-item-action"><b>FIRST LINK</b></a>
                <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>                    
                <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
                <a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>

                <a href="#" class="list-group-item list-group-item-action disabled"><b>LAST LINK</b></a>
              </div>
              <div class="card-footer">
                Card Footer
              </div>
            </div>
          </div>

          <div class="col-6">
            <h1>FIRST LINE</h1> So many words, so many words. So many words, so many words. So many words, so many words.
            <br> So many words, so many words. So many words, so many words. So many words, so many words.
            <br> So many words, so many words. So many words, so many words. So many words, so many words.
            <br>
            <h1>LAST LINE</h1>
          </div>

        </div>
      </div>
    </div>

    <div class="footer">
      Footer
    </div>

  </div>

  <!-- HERE THAT DIV CLOSED -->

</body>

これはcssです。

.bigone {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.main {
  flex: 1;
}

plnkrのデモがあります： https://plnkr.co/edit/Q9PQIj8uDFY80bxJGks

ページコンテンツが空の場合、フッターを下に配置する必要があります。そのため、.bigone { height: 100vh; }とBootstrap Flexbox alignユーティリティ）など：<div class="bigone d-flex flex-column">

ここで、cardのlist-groupと、スクロール可能な「非常に多くの単語」を含むcol-6が必要です。

一言で言えば：BODYはスクロールバーを持ってはいけません。

ヘッダーとフッターの高さは固定されていません。変更されます。

How to？私はflexboxエキスパートではありません。

IEは必要ありません。Chromeだけです。

[〜＃〜] important [〜＃〜]：

このようなものでカードの高さを固定することはできません：

height: calc(100vh - header.height - footer.height - etc...);

ヘッダー、フッターなどの高さが動的に変化するためです。

問題の写真：

WHAT I NEED

csstwitter-bootstraptwitter-bootstrap-3flexboxbootstrap-4
11
user4412054

spec によると、設定flex: 1（.main要素上）はflex: 1 1 0と同等で、以下の短縮形です。

  • flex-grow: 1
  • flex-shrink: 1
  • flex-basis: 0

ただし、何らかの理由で、flex: 1がコードで期待どおりに機能していません。 （質問ごとに、Chromeでのみチェックしています）。

ただし、.mainに完全な省略形を指定し、フレックスコンテナにしてoverflowを追加すると、レイアウトが機能しているように見えます。

.main {
    flex: 1 1 0; /* flex: 1, which you had before, is equivalent but doesn't work */
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
}

改訂版plunkr

参照：

[〜＃〜] edit [〜＃〜]（質問への変更に基づいて）

上記の私の答えは、bodyからスクロールバーを削除し、.mainセクションに垂直スクロールバーを提供します。

.mainセクションの各列で垂直スクロールバーを使用できるようにするには、次の調整を行います。

.main {
    flex: 1 1 0;
    display: flex;
}
.container-fluid {
    display: flex;
}
.col-6 {
    overflow-y: auto;
}

改訂版plunkr

7
Michael_B

私が持っています

<div class="fixed-top collapse show wrapper">
 <ul class="list-group bg-white menu">
 </ul>
</div>

私はそれを修正しました

.wrapper {
    margin-top: 48px; /* place it under navbar */
    height: 100vh;
    overflow: scroll;
    padding-bottom: 48px; /* compensate margin top */
}
0
luky