Bootstrap 4固定右侧栏
要在 Bootstrap 4 中固定右侧栏，您可以使用 Bootstrap 的内置类和 CSS 样式来实现。下面是一个示例：
<!DOCTYPE html>
<html>
<head>
<title>固定右侧栏</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<style>
.fixed-sidebar {
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: 250px;
background-color: #f8f9fa;
padding: 20px;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-9">
<!-- 主要内容 -->
</div>
<div class="col-md-3">
<div class="fixed-sidebar">
<!-- 右侧栏内容 -->
</div>
</div>
</div>
</div>
</body>
</html>在上述示例中，我们使用了 Bootstrap 的栅格系统来创建一个包含两个列的布局。左侧列占据了 9 个栅格，右侧列占据了 3 个栅格。然后，我们使用自定义的 CSS 类 .fixed-sidebar 来将右侧栏固定在页面的右侧。
通过设置 .fixed-sidebar 类的 position: fixed，我们将右侧栏固定在页面上。top: 0、right: 0、bottom: 0 和 width: 250px 属性用于定义栏的位置和宽度。您可以根据需要调整这些值。
相关·内容
1回答
在我的内容页面上，我尝试在右边有一个静态的侧边栏。我已经找到了一些例子，它们大多是有效的，但理想情况下，这个侧边栏将是内容页面的完整大小。 它当前的显示方式如下： 屏幕截图 ? <li class="nav-item"><a class="nav-link " href="#Body"><i class="fa fa-flask"></i><b>Section 4:
浏览 25提问于2018-12-20得票数 0
我正在尝试创建与twitter bootstrap的布局，我需要有正确的侧栏和标题固定。我应该看起来像这个演示，但我需要在右侧固定侧栏，我需要在顶部标题导航和横幅图像，而不仅仅是导航栏。
浏览 0提问于2012-09-11得票数 8
回答已采纳
1回答
我使用Bootstrap3中的一个构建了一个侧边栏。它工作得很好。但是怎样才能像导航栏一样固定它的位置，这样我就不会在向下滚动时丢失它了。
浏览 0提问于2013-08-24得票数 2
回答已采纳
3回答
我正在使用bootstrap 3设置一个站点，其想法是在左侧保留一个用于导航的列，在右侧保留站点的内容：
如何正确地在左侧创建一个固定的导航栏？如何避免网站内容覆盖导航栏？
非常感谢!
浏览 3提问于2013-11-07得票数 6
回答已采纳
1回答
我想创建一个html页面的第一行，其中有一个侧栏菜单和显示KPI指标的div。我想使这个KPI指标div固定。 在此KPI指标下面是表的div。现在，当用户在表中滚动时，KPI指标div应该始终是固定的。我还想知道如何对齐KPI指标div和右侧对齐的表div。我想我可以为KPI添加position : fixed。但不确定如何对齐右侧的表div。 <!container-fluid">
浏览 12提问于2019-04-06得票数 0
Bootstrap中的默认固定顶部导航栏覆盖视口的整个宽度。我希望它在容器div中显示包含它。navbar-fixed-bottom { width:100%; left: auto;}
但是导航栏仍然延伸到右侧的整个窗口
浏览 0提问于2014-12-11得票数 0
基本上，页面有一个导航栏，后跟一个包含两列的行。在左侧列中显示用户简档信息(简档图片、短bio等)，并且在右侧列中显示一些其他信息。当我尝试滚动页面时，它看起来像是导航栏下面的引导卡在导航栏上滚动。这是html页面..#bootstrap-override-card {
background: linear-gradient(to bottom, #ffffe1, #fffff
浏览 0提问于2018-09-03得票数 0
我有一个ViewController，里面有导航栏、工具栏和一个表格视图。我已经将导航栏固定在顶部、左侧和右侧，并固定了高度。我已经将工具栏固定在底部、左侧和右侧，并固定了高度。我已经将表视图固定在顶部、底部、左侧和右侧。现在，甚至连项目栏按钮和TableViews都不会响应触摸。
浏览 0提问于2015-04-13得票数 1
我有一个文章页面，使用基于Twitter Bootstrap的流畅布局。使用以下技术，当顶部导航栏位于浏览器窗口的顶部时，它会变得固定(这样它就会固定)：
一旦导航栏位于浏览器窗口的顶部，滚动条就会像预期的那样出现在侧边栏的右侧另外，由于顶部导航栏是固定的，并且他的50px很高，因此由于"top:50px;"属性，固定侧栏
浏览 3提问于2012-11-07得票数 1
我正在使用示例页面Bootstrap导航栏固定顶部的地址：当这种情况发生时，Joombotron部分的顶部被覆盖并在导航栏后面丢失(单击以查看下图)。如何修正才能确保Jumbotron始终低于导航栏部分？
谢谢你，K
浏览 2提问于2016-10-31得票数 2
我想在页面中的Jumbotron右侧创建一个可折叠的浮动导航栏。我使用的是Bootstrap 3.0。
我的导航栏会折叠，但站点名称会在导航栏折叠时消失。另外，导航栏固定在我屏幕的顶部，而不是右侧。
浏览 3提问于2013-10-03得票数 1
1回答
我想移动固定的选项卡，使它们位于选项卡栏的右侧。如果是这样，我如何才能移动“固定的选项卡栏”，使其相对于正常的选项卡栏保持在右侧？有谁有任何想法或代码片段，以便我可以操作固定的选项卡？
浏览 1提问于2012-12-11得票数 2
我正在尝试使用引导导航栏来处理左对齐和右对齐的内容。我在chrome和firefox上进行了测试，在这两种情况下，检查员的box模型都在右侧显示了15px的填充，但当页面实际呈现时，框的内容和页面右侧的滚动条之间没有空格。
浏览 0提问于2013-12-27得票数 11
回答已采纳
我正在尝试添加4个导航按钮在右侧。点击后，我将能够导航到同一页中的各个div。(就像单个页面设计一样)。 <a class=".move-1" data-target=".home-4-image"> D <
浏览 0提问于2014-02-23得票数 3
回答已采纳
并添加了来自的第一个工具栏演示Codepen演示：
删除样式将显示右侧图标，但工具栏未固定：有没有办法获得一个粘性的工具栏并显示右侧的图标。
浏览 4提问于2016-06-29得票数 5
回答已采纳
2回答
这是一个很好的例子，演示了如何使用侧边栏创建导航栏。任何人都可以修改代码，使顶部导航固定在顶部，侧边栏固定/静态，只滚动主页内容吗？我可以通过将class="fixed-top"分配给nav来使导航顶部固定，但我不知道如何固定侧边栏，使其保持在相同的位置，而不是滚动主页内容。将class="sticky-top"应用到侧边栏似乎不起作用。
浏览 2提问于2018-04-04得票数 18
回答已采纳
在桌面模式下，Bootstrap跨度是否可以按照左侧侧边栏、主要内容、右侧侧边栏和移动模式中的主要内容、左侧侧边栏、右侧侧边栏的顺序排列？ <div class="span4 main_content"
浏览 0提问于2013-06-27得票数 0
回答已采纳
2回答
我对Bootstrap导航栏有问题。<router-outlet (deactivate)="onDeactivate()"></router-outlet>当我打开页面时，导航栏在页面的顶部
浏览 2提问于2018-05-03得票数 0
2回答
在Bootstrap 4中可以有多个固定顶部的导航栏相互显示吗？
1当前覆盖了另一个，这不是我想要的。
浏览 0提问于2017-02-23得票数 33
回答已采纳
2回答
我试着在左边有一个固定宽度的侧栏，然后，在右边有一个正常的引导container-fluid。另一点是，如果我将侧边栏显示为none，则流体容器必须使用整个页面的宽度。
浏览 3提问于2016-03-17得票数 18
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
