如何在Bootstrap v4中使一个div可滚动?

问题描述 投票:0回答:1

我正在使用Bootstrap 4.1(最新)。我需要使一个div可滚动,我一直在弄乱代码,例如将overflow-autoposition-absolute设置为所有不同的div标签,但是我无法获得预期的结果。有人可以看一下我的代码并告诉我我的代码有什么问题吗?

这里是JSFiddle链接:https://jsfiddle.net/matbcvo/qsecw5bx/

这里是HTML代码:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link href="/video-js/video-js.css" rel="stylesheet">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>

<nav class="navbar sticky-top navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Gaki no Tsukai Live Stream</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Watch
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">item</a>
          <a class="dropdown-item" href="#">item2</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="text" placeholder="Username" aria-label="Username">
      <input class="form-control mr-sm-2" type="text" placeholder="Password" aria-label="Password">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Log in</button>
    </form>
  </div>
</nav>
    <div class="container-fluid">
        <div class="row">
            <div class="col-9" style="background-color: lightblue;">

                <video id="my-video" class="video-js vjs-default-skin vjs-big-play-centered"  controls preload="auto" data-setup='{ "autoplay": true, "preload": "auto", "fluid": true }'>
                    <source type="application/x-mpegURL" src="/hls/test.m3u8" />    <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
                </video>
                <script src="video-js/video.js"></script>

            </div>

            <div class="col-3" style="background-color: lightgray;">

                <div class="row">
                    <div class="col-12 position-absolute">
                        <!-- "chat-box" -->
                        <div class="overflow-auto" style="background-color: lightyellow;">
                            <p>Username: Message</p>
                            <p>Username: Message</p>
                            <p>Username: Message</p>
                            <p>Username: Message</p>
                            <p>Username: Message</p>
                            <p>Username: Message</p>
                            <p>Username: Message</p>
                            <p>Username: Message</p>
                            <p>Username: Message</p>
                            <p>Username: Message</p>
                            <p>Username: Message</p>
                            <p>Username: Message</p>
                            <p>Username: Message</p>
                            <p>Username: Message</p>
                            <p>Username: Message</p>
                            <p>Username: Message</p>
                            <p>Username: Message</p>
                            <p>Username: Message</p>
                            <p>Username: Message</p>
                            <p>Username: Message</p>
                            <p>Username: Message</p>
                            <p>Username: Message</p>
                            <p>Username: Message</p>
                            <p>Username: Message</p>
                            <p>Username: Message</p>
                            <p>Username: Message</p>
                            <p>Username: Message</p>
                            <p>Username: Message</p>
                            <p>Username: Message</p>
                            <p>Username: Message</p>
                            <p>Username: Message</p>
                            <p>Username: Message</p>
                            <p>Username: Message</p>
                            <p>Username: Message</p>
                            <p>Username: Message</p>
                            <p>Username: Message</p>
                        </div>
                        <!-- "chat-input" -->
                        <div class="input-group">
                            <div class="input-group-prepend">
                                <div class="input-group-text">@</div>
                            </div>
                            <input class="form-control" type="text">
                        </div>
                    </div>

                </div>

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

    <div class="container-fluid" style="background-color: lightgreen;">
        <div class="row">
            <div class="col-12">
                <p>some content here</p>
            </div>
        </div>
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
  </body>
</html>

如您所见,一个div中有大量内容(如“聊天框”),该div应该是可滚动的。我已经将overflow-auto设置为此div,并将position-absolute设置为此div的父div。有一个“聊天输入”应该在“聊天框” div下(不在可滚动div中)。

第二列的高度必须与第一列的高度相同(当前它应能正常工作)。

预期结果:

Expected result

bootstrap-4
1个回答
0
投票

为了制作可滚动的div,必须为该height设置固定的max-heightdiv

在您的情况下,您将有一个具有特定高度的视频播放器,因此请与聊天框的高度匹配。

阅读更多:https://developer.mozilla.org/en-US/docs/Web/CSS/overflow

示例:

/*DEMO*/
body{padding:1rem}
#wrap{width:50%;border:1px solid red}

/*MAKE DIV SCROLLABLE*/
#wrap{height:300px;}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<div id="wrap" class="overflow-auto">
  <div class="mb-5">Lorem Ipsum</div>
  <div class="mb-5">Lorem Ipsum</div>
  <div class="mb-5">Lorem Ipsum</div>
  <div class="mb-5">Lorem Ipsum</div>
  <div class="mb-5">Lorem Ipsum</div>
  <div class="mb-5">Lorem Ipsum</div>
  <div class="mb-5">Lorem Ipsum</div>
  <div class="mb-5">Lorem Ipsum</div>
</div>

Sidenote-您应该减少代码并仅显示对重现问题重要的内容。

© www.soinside.com 2019 - 2024. All rights reserved.