如何制作带有滚动条的引导媒体列表？

【问题标题】：How can I make a bootstrap media list with a scroll bar?如何制作带有滚动条的引导媒体列表？
【发布时间】：2020-05-31 17:20:16
【问题描述】：

这是我的代码：

<html>
	<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 rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
		<!-- Optional JavaScript -->
		<!-- jQuery first, then Popper.js, then Bootstrap JS -->
		<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
		<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
		<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
		<style>
			
		</style>	
	</head>
	<body class="p-1">
		<div class="p-0 container-fluid">
			<div class="p-0 row h-25 no-gutters">
				<div class="p-0 col-12 col-sm-12 col-lg-12 col-xl-12">
					<video id="selfView" class="h-100 w-100 position-absolute" controls muted>
						<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
					</video>
				</div>
			</div>
			<div class="p-0 row no-gutters">
				<div class="d-flex flex-row justify-content-center p-0 col-12 col-sm-12 col-lg-12 col-xl-12">
					<div class="btn-group-toggle p-1" data-toggle="buttons">
					  <label class="btn btn-sm btn-lg btn-success">
						TV:<span class="badge badge-success">On</span>
						<input type="checkbox" id="shareVideo" checked>
					  </label>
					</div>
					<div class="btn-group-toggle p-1" data-toggle="buttons">
					  <label class="btn-sm btn btn-lg btn-success">
						Light:<span class="badge badge-success">On</span>
						<input type="checkbox" id="shareAudio" checked>
					  </label>
					</div>
					<div class="btn-group-toggle p-1" data-toggle="buttons">
					  <label class="btn-sm btn btn-lg btn-danger">
						Air Cond:<span class="badge badge-danger">Off</span>
						<input type="checkbox" id="shareScreen">
					  </label>
					</div>
					<div class="btn-group-toggle p-1">
						<button class="btn-sm btn btn-lg btn-success">Create a meeting</button>
					</div>
				</div>
			</div>
			<div class="p-0 row no-gutters">
				<div class="p-0 col-12 col-sm-12 col-lg-12 col-xl-12">
					<ul class="nav nav-pills p-1 d-flex justify-content-around" id="pills-tab" role="tablist">
						<li class="nav-item">
							<a class="nav-link active" 
								id="pills-info-tab" data-toggle="pill" 
								href="#pills-info" role="tab" aria-controls="pills-info" aria-selected="true">
								i
							</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" 
								id="pills-member-tab" data-toggle="pill" 
								href="#pills-member" role="tab" aria-controls="pills-member" aria-selected="false">
								f
							</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" 
								id="pills-message-tab" data-toggle="pill" 
								href="#pills-message" role="tab" aria-controls="pills-message" aria-selected="false">
								c
							</a>
						</li>
					</ul>
					<div class="tab-content border border-success position-relative" id="pills-tabContent">	
						
							<div class="tab-pane fade p-0 show active " id="pills-info" role="tabpanel" aria-labelledby="pills-member-tab">
								<ul class="list-unstyled overflow-auto h-100">
								  <li class="media">
									a
								  </li>
								  <li class="media">
									b
								  </li>
								  <li class="media">
									c
								  </li>
								  <li class="media">
									a
								  </li>
								  <li class="media">
									b
								  </li>
								  <li class="media">
									c
								  </li>
								  <li class="media">
									a
								  </li>
								  <li class="media">
									b
								  </li>
								  <li class="media">
									c
								  </li>
								  <li class="media">
									a
								  </li>
								  <li class="media">
									b
								  </li>
								  <li class="media">
									c
								  </li>
								  <li class="media">
									a
								  </li>
								  <li class="media">
									b
								  </li>
								  <li class="media">
									c
								  </li>
                  <li class="media">
									a
								  </li>
								  <li class="media">
									b
								  </li>
								  <li class="media">
									c
								  </li>
								</ul>
							</div>
							<div class="tab-pane fade p-0" id="pills-member" role="tabpanel" aria-labelledby="pills-member-tab">	
								2
							</div>
							<div class="tab-pane fade p-0" id="pills-message" role="tabpanel" aria-labelledby="pills-member-tab">	
								3
							</div>
						
					</div>
				</div>
			</div>
		</div>
	</body>
</html>

如何使用滚动条制作引导媒体列表（即第 81 行）？

我使用了“position-relative”和“position-absolute”类来让浏览器显示滚动条。

不幸的是，它不起作用。

因为我用手机浏览网页时，媒体列表太长了。

【问题讨论】：

  • 用css，设置div高度并使用overflow:scroll
  • 我想设置div的高度等于浏览器的其余高度，但是我不知道怎么做。
  • 我的答案在下面。即使用计算函数

标签： javascript html css bootstrap-4


【解决方案1】：

使用 CSS，将其放入空的 &lt;style&gt;&lt;/style&gt; 标记中，然后从 ul 中删除 overflow-auto h-100 类。

#pills-info {
  height: calc(100vh - 100px);
  overflow-y: scroll
}

【讨论】：

  • 你能告诉我为什么要减去 100px 吗？
  • 大概是导航部分的高度，可以调整
【解决方案2】：

可以使用具有以下 2 个属性的 CSS 类来添加滚动条：

  1. overflow-y: 滚动
  2. 最大高度：高度；

滚动条的示例 CSS 类：

        .scroll-bar {
            overflow-x: scroll;
            overflow-y: scroll;
            max-height: 100px;
        }

下面是添加了 CSS 类的工作示例：

<html>
    <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 rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

        <style>
            .scroll-bar {
                overflow-x: scroll;
                overflow-y: scroll;
                max-height: 100px;
            }
        </style>    
    </head>
    <body class="p-1">
        <div class="p-0 container-fluid">
            <div class="p-0 row h-25 no-gutters">
                <div class="p-0 col-12 col-sm-12 col-lg-12 col-xl-12">
                    <video id="selfView" class="h-100 w-100 position-absolute" controls muted>
                        <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
                    </video>
                </div>
            </div>
            <div class="p-0 row no-gutters">
                <div class="d-flex flex-row justify-content-center p-0 col-12 col-sm-12 col-lg-12 col-xl-12">
                    <div class="btn-group-toggle p-1" data-toggle="buttons">
                      <label class="btn btn-sm btn-lg btn-success">
                        TV:<span class="badge badge-success">On</span>
                        <input type="checkbox" id="shareVideo" checked>
                      </label>
                    </div>
                    <div class="btn-group-toggle p-1" data-toggle="buttons">
                      <label class="btn-sm btn btn-lg btn-success">
                        Light:<span class="badge badge-success">On</span>
                        <input type="checkbox" id="shareAudio" checked>
                      </label>
                    </div>
                    <div class="btn-group-toggle p-1" data-toggle="buttons">
                      <label class="btn-sm btn btn-lg btn-danger">
                        Air Cond:<span class="badge badge-danger">Off</span>
                        <input type="checkbox" id="shareScreen">
                      </label>
                    </div>
                    <div class="btn-group-toggle p-1">
                        <button class="btn-sm btn btn-lg btn-success">Create a meeting</button>
                    </div>
                </div>
            </div>
            <div class="p-0 row no-gutters">
                <div class="p-0 col-12 col-sm-12 col-lg-12 col-xl-12">
                    <ul class="nav nav-pills p-1 d-flex justify-content-around" id="pills-tab" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" 
                                id="pills-info-tab" data-toggle="pill" 
                                href="#pills-info" role="tab" aria-controls="pills-info" aria-selected="true">
                                i
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" 
                                id="pills-member-tab" data-toggle="pill" 
                                href="#pills-member" role="tab" aria-controls="pills-member" aria-selected="false">
                                f
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" 
                                id="pills-message-tab" data-toggle="pill" 
                                href="#pills-message" role="tab" aria-controls="pills-message" aria-selected="false">
                                c
                            </a>
                        </li>
                    </ul>
                    <div class="tab-content border border-success position-relative" id="pills-tabContent"> 

                            <div class="tab-pane fade p-0 show active" id="pills-info" role="tabpanel" aria-labelledby="pills-member-tab">
                                <ul class="list-unstyled overflow-auto h-100 scroll-bar">
                                  <li class="media">
                                    a
                                  </li>
                                  <li class="media">
                                    b
                                  </li>
                                  <li class="media">
                                    c
                                  </li>
                                  <li class="media">
                                    a
                                  </li>
                                  <li class="media">
                                    b
                                  </li>
                                  <li class="media">
                                    c
                                  </li>
                                  <li class="media">
                                    a
                                  </li>
                                  <li class="media">
                                    b
                                  </li>
                                  <li class="media">
                                    c
                                  </li>
                                  <li class="media">
                                    a
                                  </li>
                                  <li class="media">
                                    b
                                  </li>
                                  <li class="media">
                                    c
                                  </li>
                                  <li class="media">
                                    a
                                  </li>
                                  <li class="media">
                                    b
                                  </li>
                                  <li class="media">
                                    c
                                  </li>
                  <li class="media">
                                    a
                                  </li>
                                  <li class="media">
                                    b
                                  </li>
                                  <li class="media">
                                    c
                                  </li>
                                </ul>
                            </div>
                            <div class="tab-pane fade p-0" id="pills-member" role="tabpanel" aria-labelledby="pills-member-tab">    
                                2
                            </div>
                            <div class="tab-pane fade p-0" id="pills-message" role="tabpanel" aria-labelledby="pills-member-tab">   
                                3
                            </div>

                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

输出：

【讨论】：

    猜你喜欢
    • 2023-03-08
    • 1970-01-01
    • 1970-01-01
    • 2012-08-05
    • 2023-04-10
    • 2021-06-24
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode