个人中心
gpt4 book ai didi

jquery - 如何在 Bootstrap 的左侧和主面板中添加不同的滚动条

转载 作者：太空宇宙 更新时间：2023-11-04 02:02:40 28 4
gpt4 key购买 nike

如何向左侧导航面板添加不同的滚动条。主面板和左侧导航面板的内容可以不同，我想让侧边栏独立于主面板滚动。我尝试在所有元素上添加 overflow auto

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <title>Bootply snippet - Bootstrap 3 Sidebar + Fixed Navbars</title>
    <meta name="generator" content="Bootply" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="description" content="Template with 3-column layout using fixed navbar, left sidebar nav and 2 scrolling content columns." />
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.min.css" rel="stylesheet">
    <!--[if lt IE 9]>
      <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <link rel="apple-touch-icon" href="/bootstrap/img/apple-touch-icon.png">
    <link rel="apple-touch-icon" sizes="72x72" href="/bootstrap/img/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="114x114" href="/bootstrap/img/apple-touch-icon-114x114.png">
    <style type="text/css">
        body {
            padding-top:50px;
        }
    </style>
</head>

<body>
<!-- Fixed navbar -->
<div class="navbar navbar-fixed-top">
    <div class="container-fluid">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainnav">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">World</a>
        <div class="nav-collapse collapse" id="mainnav">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#contact">Contact</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li class="divider"></li>
                        <li class="dropdown-header">Header</li>
                        <li><a href="#">Separated link</a></li>
                        <li><a href="#">One more separated link</a></li>
                    </ul>
                </li>
            </ul>
            <ul class="nav navbar-nav pull-right">
                <li><a href="#">Link</a></li>
                <li><a href="#">Login</a></li>
                <li><a href="#"><i class="glyphicon glyphicon-user"></i></a></li>
            </ul>
        </div><!--/.nav-collapse -->
    </div>
</div>


<!-- Content -->
<div class="container-fluid">
    <div class="row" >
        <div class="col-sm-2" style="overflow-y: auto">
            <div class="navbar navbar-default">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#sidebar">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            <div class="nav-collapse collapse" id="sidebar">
            <ul class="nav navbar-nav">
                <li><a href="#">The Next Web</a></li>
                <li><a href="#">Mashable</a></li>
                <li><a href="#">TechCrunch</a></li>
                <li><a href="#">GitHub</a></li>
                <li><a href="#">TechMeMe</a></li>
                <li><a href="#">TechMeMe</a></li>
                <li><a href="#">The Next Web</a></li>
                <li><a href="#">Mashable</a></li>
                <li><a href="#">TechCrunch</a></li>
                <li><a href="#">GitHub</a></li>
                <li><a href="#">TechMeMe</a></li>
                <li><a href="#">TechMeMe</a></li>
                <li><a href="#">The Next Web</a></li>
                <li><a href="#">Mashable</a></li>
                <li><a href="#">TechCrunch</a></li>
                <li><a href="#">GitHub</a></li>
                <li><a href="#">TechMeMe</a></li>
                <li><a href="#">TechMeMe</a></li>
                <li><a href="#">The Next Web</a></li>
                <li><a href="#">Mashable</a></li>
                <li><a href="#">TechCrunch</a></li>
                <li><a href="#">GitHub</a></li>
                <li><a href="#">TechMeMe</a></li>
                <li><a href="#">TechMeMe</a></li>
                <li><a href="#">The Next Web</a></li>
                <li><a href="#">Mashable</a></li>
                <li><a href="#">TechCrunch</a></li>
                <li><a href="#">GitHub</a></li>
                <li><a href="#">TechMeMe</a></li>
                <li><a href="#">TechMeMe</a></li>
                <li><a href="#">The Next Web</a></li>
                <li><a href="#">Mashable</a></li>
                <li><a href="#">TechCrunch</a></li>
                <li><a href="#">GitHub</a></li>
                <li><a href="#">TechMeMe</a></li>
                <li><a href="#">TechMeMe</a></li>
                <li><a href="#">The Next Web</a></li>
                <li><a href="#">Mashable</a></li>
                <li><a href="#">TechCrunch</a></li>
                <li><a href="#">GitHub</a></li>
                <li><a href="#">TechMeMe</a></li>
                <li><a href="#">TechMeMe</a></li>
                <li><a href="#">The Next Web</a></li>
                <li><a href="#">Mashable</a></li>
                <li><a href="#">TechCrunch</a></li>
                <li><a href="#">GitHub</a></li>
                <li><a href="#">TechMeMe</a></li>
                <li><a href="#">TechMeMe</a></li>
            </ul>
            </div>
            </div>
        </div>

        <div class="col-sm-10">
            <div class="row">
                <div class="col col-sm-12"><h2>Responsive</h2><p>In simple terms, a responsive web design figures out what resolution of
                    device it's being served on. Flexible grids then size correctly to fit
                    the screen. Mobile-first Bootstrap 3 is responsive.</p></div>
            </div>
            <hr>
            <div class="row">
                <div class="col-sm-8"><h2>Lighweight</h2><p>The new Bootstrap 3 is a smaller build. The separate Bootstrap
                    base and responsive.css files have now been merged into one. There is no
                    more fixed grid, only fluid.</p></div>
                <div class="col-sm-4"><img class="img-responsive" src="//placehold.it/220x180/666666/FFF"></div>
            </div>
            <hr>
            <div class="row">
                <div class="col-sm-4"><img class="img-responsive" src="//placehold.it/220x180/777777/FFF"></div>
                <div class="col-sm-8"><h2>Large, Small or Tiny</h2><p>
                    The new fluid grid comes in 3 flavors, or actually sizes. The large grid <code>col-lg-*</code> works exactly like the Bootstrap 2.x <code>span*</code> did.
                    There is also a small grid that is realized using the <code>col-sm-*</code> classes. This smaller grid is ideal for smartphones and tablets.
                    Finally, there is the non-stacking tiny grid <code>col-*</code> that is intended for very small screens less that 480px.
                </p></div>
            </div>
            <hr>
            <div class="row">
                <div class="col-sm-8"><h2>A Playground</h2><p>
                    Bootply is a playground for Bootstrap. Designers and developers use Bootply to edit, design, prototype, test and find examples that use Bootstrap 3.
                    Use Bootply to hand-code HTML, Javascript, CSS and drop in the Bootstrap classes. There is a also a visual drag-and-drop builder that is perfect for wire-framing and mockups.
                </p></div>
                <div class="col-sm-4"><img class="img-responsive" src="//placehold.it/220x180/777777/FFF"></div>
            </div>
            <hr>
        </div>
    </div>
</div>


<script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type='text/javascript' src="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/js/bootstrap.min.js"></script>
</body>
</html>

最佳答案

首先将其添加到您的 body 样式中:

overflow-y: scroll;

然后将其添加到样式文件中的 col-sm-2 类:

overflow-y: scroll;
height: 100vh;

您也可以在 jsfiddle 中查看!

关于jquery - 如何在 Bootstrap 的左侧和主面板中添加不同的滚动条，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41456007/

28 4 0
文章推荐： python - 有没有办法在 tf.data.Dataset w/tf.py_func 中传递字典？
文章推荐： node.js - 如何使用nodejs、d3和jsdom修改基于svg的dom的内容？
文章推荐： c - udp 套接字上的多个变量
文章推荐： javascript - Dropbox API - 文件读取和上传node.js
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com