css位置粘滞不适用于bootstrap 4类行
CSS位置粘滞（sticky）是一种CSS属性，它可以使元素在滚动过程中保持在特定位置。然而，在Bootstrap 4中，由于其设计理念和布局结构的特点，CSS位置粘滞并不适用。
Bootstrap 4是一个流行的前端开发框架，它提供了一套响应式的网页设计模板和组件，旨在简化开发过程并提高开发效率。它使用了一种基于网格系统的布局结构，通过将页面划分为12个等宽的列来实现灵活的布局。
CSS位置粘滞通常用于创建固定的导航栏或侧边栏，使其在滚动时保持在页面的特定位置。然而，在Bootstrap 4中，由于其网格系统的特性，页面的布局结构是动态的，元素的位置会随着页面的大小和内容的变化而自适应调整。因此，使用CSS位置粘滞可能会导致布局错乱或元素重叠的问题。
在Bootstrap 4中，如果需要创建固定的导航栏或侧边栏，可以使用Bootstrap提供的固定导航栏（Fixed Navbar）和固定侧边栏（Fixed Sidebar）组件。这些组件已经经过优化和测试，可以在不同设备和屏幕尺寸下正常工作，并且与Bootstrap的网格系统兼容。
腾讯云提供了一系列与云计算相关的产品和服务，包括云服务器、云数据库、云存储等。如果您需要在腾讯云上部署和运行基于Bootstrap 4的应用程序，可以考虑使用腾讯云的云服务器（CVM）和云数据库（CDB）来搭建和管理您的应用环境。您可以通过访问腾讯云的官方网站（https://cloud.tencent.com/）了解更多关于腾讯云的产品和服务信息。
请注意，本回答仅供参考，具体的解决方案可能因实际需求和情况而有所不同。建议在实际开发过程中，根据具体情况选择合适的解决方案。
相关·内容
1回答
我目前有一个Bootstrap表，我面临的问题是，如果不删除Bootstrap .table响应类，粘性头部就不能工作。在不使用JS的情况下，这可能吗？
.table-responsive {
display: block;
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.table-fixed {
width: 100%;
}
/* This will work on every browser but Chrome Browser */
.table-fixed the
浏览 0提问于2019-05-16得票数 4
我是新来的Bootstrap，试图做出响应菜单。因为某种原因粘顶不起作用。我的浏览器确实支持它，并将我的代码与其他工作版本进行比较，我只是不明白为什么它不能工作。我正在使用引导4.1.3。
这是我的代码，我不知道有任何可能与粘顶碰撞。
h1,h2,h3,h4,p,ul,ol,li,body {
margin: 0;
padding: 0;
}
a {
transition: all 0.3s ease-out;
}
a:hover {
transition: all 0.3s ease-out;
}
.container {
margin: aut
浏览 0提问于2018-09-30得票数 20
回答已采纳
当我触摸此位置绝对按钮时，它不起作用。 ? 代码 render() {
return (
<Container>
<View style={{ borderColor: '#fff',height:'30%'}}>
<ImageBackground
source={{uri: 'https://i.ibb.co/TwdZhVM/image-5.png'}}
浏览 12提问于2019-09-16得票数 2
2回答
我正在用flask和bootstrap做我的项目。 问题是，滚动的文本像素在标题上方弹出。如下图所示。 所以我想通过在头部添加边框或者使头部比表格行更厚来隐藏这一点。 ? 这是我的html代码(由于代码太长，我几乎跳过并截图)： ? 以及可滚动表格和可单击行的css代码： .tableFixHead { overflow-y: auto; height: 400px; }
.tableFixHead thead th { position: sticky; top: 0; }
table { border-collapse: collapse; height
浏览 16提问于2021-01-06得票数 0
1回答
我正在尝试创建一个具有粘性列的数据表。在本专栏中，我还喜欢创建一个引导下拉按钮。但是，引导下拉列表与粘性位置有冲突。下拉菜单总是在粘性列后面打开。当下拉式打开顶部的位置时，它看起来很好，但是当它打开底部的位置时，问题就开始了。
td,th{
white-space: nowrap;
}
table{
position: relative;
overflow-y: scroll;
}
tr th{
padding: 20px;
border: 1px solid red;
}
th:last-child{
position: sticky;
righ
浏览 1提问于2021-03-25得票数 2
1回答
如何使边栏粘在页面卷轴上？
<div class="header">This is header</div>
<div class="row category-page">
<div class="category-filter col-2">Filter</div>
<div class="category-content col-10">ontent</div>
</div>
<div cl
浏览 3提问于2022-08-22得票数 0
我正在构建一个ASP.NET web应用程序，我很难让bootstrap-select正常工作。
我已经看过关于这方面的其他帖子，似乎没有什么能解决这个问题，所以我希望我今天能得到一些帮助。
web应用程序使用母版页，其中包含以下声明，以包含所有CSS和JavaScript文件：
<head runat="server">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-sc
浏览 7提问于2022-06-18得票数 0
回答已采纳
1回答
我的导航栏的样式是这样的：
ul#navigation {
font-size: 1em;
list-style-type: none;
display: block;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #824c71;
position: sticky; /*<-!*/
top: 0;
}
现在，我的页面上有几个浮动元素，样式如下：
<div style="width:50%;background-color:#e6c
浏览 15提问于2018-01-14得票数 0
jsDelivr ( )有多个文件模式：
问题是，具有CSS的库(如和 )在它们的接口组件中使用图像。
这将导致在执行以下操作时出现404错误：
//cdn.jsdelivr.net/g/jquery@2.1.0,bootstrap@3.1.1,summernote@0.5.0,mousewheel@3.1.6,jquery.timeago@1.3.0,jquery.gritter@1.7.4,jquery.unveiljs@1.0,jquery.waypoints@2.0.2,bootstrap.tagsinput@0.3.9,bootstrap.datepicker-for
浏览 10提问于2014-04-26得票数 2
1回答
可滚动div内固定导航
、、、
我希望有一个导航条，是固定在一个可滚动的div，而不是在整个窗口顶部。在下面的示例中，我希望我的导航条出现在红色区域，并在滚动时保持固定。
#containerDiv {
padding-top: 60px;
}
#scrollDiv {
overflow-y: scroll;
height: 100px;
}
#scrollableContentDiv {
background-color: red;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/boo
浏览 4提问于2021-03-18得票数 0
回答已采纳
3回答
我正在尝试创建一个粘性搜索框，这样当你滚动时，它总是在页面的顶部。但是，我希望它占据100%的容器，而不是窗口。
下面是一个HTML标记示例：
<div class="container">
<div class="searchbox">
Search Box
</div>
</div>
和CSS：
.container {
background-color: blue;
width: 300px;
padding: 20px;
height: 40p
浏览 2提问于2014-10-07得票数 3
我正在使用Twitter Bootstrap。我想知道，是否有任何特定的CSS类来定义IE浏览器的主体或HTML标签。我想写CSS专门为所有IE浏览器。
我知道bootstrap为IE浏览器提供了一些CSS类到HTML标签，从那里我们可以编写版本明智的CSS，但我想写一个CSS，这将适用于所有的IE浏览器。
浏览 0提问于2013-02-14得票数 2
回答已采纳
1回答
我试图在我的网站上制作一个粘性元素，它是用wordpress制作的，带有一个自定义模板。
我尝试了一切，从css (位置:粘性)应该工作。但就我而言并非如此。
你能帮我解决这个问题吗？
非常感谢你抽出时间。
浏览 1提问于2019-11-20得票数 0
回答已采纳
1回答
我正在尝试对我所有的js和css文件使用gulp-uncss。只有使用css文件才能正常工作，问题是我的application.js有这样的结构：
"use strict";
(function () {})();
看起来uncss没有将这一行识别为js语法并抛出一个错误。我如何才能避免这个问题，或者只有这一行？谢谢！
这是我在控制台上看到的错误：
/Users/noeliabelenlopez/Documents/frontend-bootstrap/node_modules/gulp-uncss/node_modules/uncss/node_modules/bluebi
浏览 5提问于2016-08-26得票数 0
1回答
我正在尝试将列垂直对齐在Bootstrap 3.3.7 using flexbox中的一行中。这一行必须有62px的最小高度.
我有三个列；一个列(.title)总是包含一些文本，另外两个可能有时是hidden or empty。无论如何，它们在行中总是垂直对齐的。
我有这个html
.titlebar {
border: 1px solid red;
font-size: 21px;
line-height: 1.2em;
min-height: 62px;
overflow: hidden;
margin-left: 0;
margin-right: 0;
浏览 4提问于2016-12-08得票数 1
? 我在一个与angular 7的宣传网站上工作，设计师给了我2张相互完成的背景图片，其中1张是真实的镜头，其中一个突出显示的部分(已经在照片中)应该与其他背景对齐。1)我应该做什么，以便在两者之间保持一致，并使它们具有响应性。我也应该使用img标签或背景css。2)解决这类问题的更好方法是什么(我应该要求设计师给我所有元素的完整背景吗？) 我尝试的最后一件事是使用img标记，这个标记很好，直到我在图像顶部添加了一些带有z-index的文本。我使用了position: absolute和position:relative来将元素插入到背景之上，但这会使一切变得混乱。下面是html： &l
浏览 27提问于2019-07-04得票数 0
2回答
我现在用光滑来做一个旋转木马。
我现在有两个问题，让我们从第一个问题开始。
1)
我目前正在使用一个滑块，其中我想显示3张幻灯片:当前图像(Spyro)，前一个幻灯片(崩溃)和下一个幻灯片(Tekken)。
如您所见，虽然当前幻灯片正确地与前一个幻灯片(Spyro >崩溃)重叠，但下一个幻灯片与当前幻灯片(Tekken > Spyro)重叠。
，当然，我希望当前的幻灯片在他们两人之上.我怎样才能解决这个问题？
我在接下面的密码。
App.js
import "./App.css";
import { useEffect, useState } from
浏览 0提问于2021-06-10得票数 0
我有一些css和js文件。因此，我希望将单个类中的这些导入到不同的php文件中。
class generalStyles {
function getGenStyles(){
echo "<link rel='stylesheet' href='bootstrap/css/bootstrap.css'/>
<link rel='stylesheet' href='bootstrap/css/bootstrap-theme.css'/>
<link re
浏览 6提问于2013-12-21得票数 0
回答已采纳
我在angular-cli.json "../node_modules/bootstrap/dist/css/bootstrap.min.css"中有in样式。为什么当我删除这些行并添加到每个组件@import "{correct path to every directory/node_modules/bootstrap/dist/css/bootstrap.min.css}"中的每个css时，它不能像以前那样工作？
浏览 0提问于2018-04-17得票数 1
1回答
当您向下滚动时，希望在页面中有一个块。
即
(注：“精美的珠宝设计适合穿着它的女性”，文字块棒，而右侧仍然卷轴)
.sticky { position: sticky; top: 0px; }
这是一个自定义的CSS代码在squarespace中。粘糊糊不起作用了，它在折磨我的大脑。我甚至将溢出更改为可见或自动(不是隐藏)。还是不起作用。粘性甚至不会出现高亮的类似位置:固定做。
浏览 1提问于2019-12-11得票数 0
2回答
我想保持粘性标题保持在我的#主div顶部。
这是我的js 。即使是在反应模式下。我尝试了下面的代码，但它不起作用。
@import "bootstrap-sprockets";
@import "bootstrap";
@import "font-awesome";
@import "navbar";
body,
html {
height: 100%;
overflow: hidden;
position: relative;
}
body {
padding: 10px;
}
.row-offcanva
浏览 4提问于2017-05-16得票数 1
回答已采纳
2回答
我正在尝试用Twitter Bootstrap css设计一个简单的Ruby on rails表单，但是我很难弄清楚哪部分rails代码应该放入表单的Bootstrap css的哪一部分。
例如，下面的代码行适合窗体的Bootstrap css的什么位置？
<%= f.text_field :company %>
浏览 0提问于2015-11-06得票数 0
1回答
我正在构建一个领先的网页应用程序，我试图添加一个模式或“弹出”，但我似乎不能正确。
下面是它现在的样子:如图所示，模态没有占据屏幕的全部宽度，导致屏幕的右侧没有覆盖，模态本身也没有居中。
我的代码如下所示：
HTML：
<p>{{ num_matches_in_current_season }} matches have been played in season {{ current_season }} so far.</p>
<button type="button" name="end_season_btn" id="
浏览 0提问于2020-09-21得票数 0
回答已采纳
1回答
尝试使用Laravel为我的应用程序包含node_modules。对此不太有经验
我正在尝试包括sticky.js，但继续在控制台中获取消息：
未定义的ReferenceError:粘性未定义
这是webpack的档案：
const mix = require('laravel-mix');
mix.js('resources/js/vendor.js', 'public/js')
.combine([
'resources/js/appOptions.js',
'resources/js/scripts
浏览 0提问于2019-07-11得票数 2
回答已采纳
1回答
我有一个粘性导航与此代码(这不是我的)
// Create a clone of the menu, right next to original.
$('nav').addClass('original').clone().insertAfter('.navbar-default').addClass('cloned').css('position','fixed').css('top','0').css('margin-top','0
浏览 1提问于2015-08-07得票数 0
当您滚动时，如果在溢出:滚动的父div上有CSS，您将如何找到元素的位置？我用这样的钩子
const [scrollPosition, setScrollPosition] = useState(0);
console.log(scrollPosition);
const handleScroll = () => {
const position = window.pageYOffset;
setScrollPosition(position);
};
useEffect(() => {
window.addEventListener(&
浏览 1提问于2020-11-13得票数 0
回答已采纳
1回答
我有一个奇怪的情况，只是发生在一个wordpress网站的安装。在这里，我需要有一个两列网格，并成为第一个，一个粘性的顶部。
您可以在：上查看测试页面
css非常简单，它使用wordpress：
.wrapper {
display: grid;
grid-template-columns: 50px 200px;}
.item1 {
grid-column: 1;
align-self: start;
position: sticky;
top: 0;}
.item2 {
grid-column: 2;}
有谁知道发生这种事的原因吗？
浏览 3提问于2022-09-14得票数 0
1回答
我想构建一个laravel 8应用程序，它使用引导，它是如此简单，直到这一部分，但我想添加rtl版本的引导。所以我做的是：
composer require laravel/ui
php artisan ui bootstrap
npm install
npm run dev
我得到的是，引导系统运行良好。我为rtl引导程序所做的是在layout.blade.php中完成的
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<link rel="style
浏览 5提问于2020-10-27得票数 1
回答已采纳
1回答
我使用的是Spring 3，基于java的配置，以及BootStrap。
我已经下载了引导程序，并将css和js放在资源目录下。
我不能在共济会页面中使用这些.css的问题。但是我是进口的。
猫日志上写着：
“警告:在名称为‘’的DispatcherServlet中找不到URI DispatcherServlet的HTTP映射
目录：
> -SpringWay
> -src
> - main
> -webapp
> -resources
浏览 2提问于2012-03-29得票数 1
4回答
我正在尝试制作一个导航栏，当你向下滚动时，它会停留在屏幕的顶部。 下面是它现在的样子： ? Navbar.jsx import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import { BsFillPersonFill } from 'react-icons/bs';
import { FiMail } from 'react-icons/fi';
import { FaPlus, FaSearch } from 're
浏览 122提问于2021-02-18得票数 1
回答已采纳
1回答
我对UI很陌生，还使用了带引导带的nvd3，现在有一个线条图正在做一些奇怪的事情:当鼠标在图表的任何一半上盘旋时，交互指南和高亮显示的(x，y)点会恢复到图的另一半的最远值。换句话说，当悬停在图表的右半部分时，第一个数据点被选中，当悬停在图表的左半部分时，最后一个数据点被选中。我已经证实了图表数据是准确的。我试着做小提琴，如果小提琴有效的话，我会更新这篇文章，但是图表的Javascript看起来是正确的。非常感谢提前！
以下是“视图”的“脚本”部分：
@section Scripts{
<!-- page specific plugins -->
<!-- n
浏览 2提问于2016-02-10得票数 0
回答已采纳
我正在使用Angular 4，Bootstrap 4，并试图实现一个固定的可滚动的右div和一个固定的左div。它应该非常类似于所拥有的。
Bootstrap在版本4中删除了附加的jQuery插件，所以这个方法不再有效，他们建议使用position: sticky，但我不能让它工作。
请帮帮我！
index.html
<div class="container-fluid">
<div class="row h-100">
<div class="col-md-6">
<div i
浏览 3提问于2017-05-20得票数 9
回答已采纳
1回答
我正在为一个客户做这个网站：。他们想给一些页面添加“皮肤”或“翅膀”，就像你在这里看到的：
如果你查看JB Hi Fi网站，你会注意到当你向下滚动时，广告的顶部固定在屏幕的顶部。在我的网站上，我似乎做不到这一点。
任何关于如何使这项工作的帮助将不胜感激。
干杯
浏览 12提问于2016-09-27得票数 0
我试图理解为什么我的ngb时间选择器的旋转轮廓是可见的，我怀疑这是与css有关，但坦率地说，我对这个领域还不太了解。想办法解决这个问题会很感激的。(即使解决方案包括通过css隐藏它，这也是我自己不了解的)
示例代码：
Html：
<div mat-dialog-content>
<ngb-timepicker [(ngModel)]="data.time" ></ngb-timepicker>
</div>
css是空的，我只在TS上使用常规
import {NgbModule} from '@ng-bo
浏览 0提问于2017-11-10得票数 0
回答已采纳
我有以下HTML页面的布局：
顶部菜单
左菜单
内容div
HTML：
<div class='body-content app'>
<div class="top">
<div class="info"><div _ngcontent-c17="">Version:1.05.20.20 </div></div>
<div _ngcontent-c17="">
<a
浏览 4提问于2020-03-03得票数 0
1回答
我是spring boot和spring security的新手。这里我试图用胸腺运行spring boot web应用程序，但是当我试图在没有css加载的浏览器页面中点击url。
在Firefox中，下面的警告显示
Strict-Transport-Security: The connection to the site is untrustworthy, so the specified header was ignored.
Loading failed for the <script> with source “https://localhost:xxxx/assets/b
浏览 4提问于2018-09-05得票数 0
我有以下代码(示例)：
<div style="position: fixed">
<div id="AAA" style="position: absolute; background-color: green; z-index: 1">AAA</div>
</div>
<div style="position: relative">
<div id="BBB" style="position: absolute; backgr
浏览 1提问于2017-05-31得票数 2
回答已采纳
大家好，当我运行以下代码时，进度条不显示
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
</head>
<body>
<div class="progress">
<div class="progress-bar"
浏览 1提问于2014-01-09得票数 0
我有很多脚本和样式在头标签，有时他们没有正确加载。我的头是这样的：
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr
浏览 12提问于2022-07-20得票数 0
回答已采纳
我正在使用bootstrap 5创建响应表，它工作得很好，但是当一列包含大量文本时，所有其他列都会被压缩，这会让它看起来很奇怪。我想设置它，使文本数量较少的列和表头不会被切断。我还将表设置为responsive，这在bootstrap的css集overflow-x: auto中。
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity=
浏览 0提问于2021-02-23得票数 0
1回答
我尝试将django项目中的所有bootstrap文件都放在一个文件夹中并引用它们。为此，我在setting.py中添加了以下代码行：
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
我的base.html看起来像这样：
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
浏览 0提问于2017-12-10得票数 3
回答已采纳
1回答
我已经使用React、webpack和react-router创建了一个页面反应应用程序。该应用程序在本地运行良好，没有任何错误或警告。
问题是，一旦我创建了一个生产版本，并试图在index.html文件夹中运行dist文件，它就不会启动我的react应用程序。
package.json
{
"name": "redux-simple-starter",
"version": "1.0.0",
"description": "Simple starter package for Redux wi
浏览 0提问于2019-09-24得票数 0
回答已采纳
我是Twitter Bootstrap的新手，我想在一个深的MastHead的底部有一个NavBar，当用户垂直滚动页面，NavBar到达页面顶部时，将样式更改为，以便NavBar变得固定。我想要的效果与仅使用Bootstrap NavBar的相同。
因此，真正的问题是，当NavBar滚动到位置0(即浏览器顶部)时，如何触发导航栏固定顶部样式。
任何想法或指针都将不胜感激。谢谢。
浏览 1提问于2012-06-30得票数 17
我有一个作为固定元素的侧边栏，但是当它到达页脚时，固定元素会超出我的页脚，我真正想要的是，如果固定元素在页脚之前停止滚动：
<div class="container">
<div class="row">
<div class="col-md-8">Blah Blah Blah</div>
<div class="col-md-4 related-podcasts">
<ul class="p
浏览 5提问于2022-11-30得票数 0
回答已采纳
1回答
在jquery中编辑滚动位置
、、、、
我有一个网站设计，其中第二个标志需要出现后，设置滚动位置。我用下面的代码实现了这一点： myID = document.getElementById("logoTwo");
var myScrollFunc = function () {
var y = window.scrollY;
if (y >= 300) {
logoTwo.className = "logo-lines show"
} else {
logoTwo.className = "logo-lines hide"
浏览 30提问于2020-07-27得票数 0
我通过NPM (npmjs.com)下载了bootstrap-table包。这为在我的ReactJS应用程序中设置表或数据网格提供了一些奇妙的功能。然而，有几个附加的js文件和css文件，需要额外的“位”功能。例如，向左滚动时移动的粘滞列标题，或向左或向右滚动时固定的第一列。开发者网站上的示例都是指本地脚本包含：
<link rel="stylesheet" src="extensions/fixed-columns/bootstrap-table-fixed-columns.css">
<script src="extensions/
浏览 15提问于2020-05-14得票数 0
1回答
我正在试着做一个导航栏，就像这个网站上的一样
(要查看效果，您必须单击菜单中的任何链接，以便可以向下滚动。)
正如你所看到的，当你向下滚动导航栏时，它会以视频为背景，使用一些顶部填充来固定到顶部。
我看到它使用bootstrap Scrollspy，但我真的不确定如何在我的网站上实现它。
使用CSS可以做到这一点吗？
浏览 25提问于2017-03-15得票数 0
我尝试在网格中使用sticky-top类，但它不起作用
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 sticky-top"> <!
浏览 6提问于2019-11-16得票数 2
回答已采纳
2回答
持久页眉和页脚
、、、
我有两个宽度为100%的div。我希望第一个总是在所有内容的顶部，我希望第二个总是在所有内容的底部。我该怎么做呢？最好使用纯CSS，但如果需要，我会尝试jQuery/JS解决方案。
我尝试使用include(" header.php ")；添加标题，而header.php只包含标题的HTML代码。但是，它不起作用，但是将确切代码放在include的位置可以很好地工作。我该如何解决这个问题呢？
浏览 0提问于2011-02-14得票数 0
回答已采纳
1回答
我想知道css3动画是否适用于窗口滚动？例如，在jquery中，您可以使用以下内容：
$(window).animate({scrollTop: '+=200'}, 300, function() { });
所以我的问题是，是否有可能用css3做类似的事情，并因此利用硬件加速的css3动画的优势？是否可以使用css3对滚动区域进行动画处理？
浏览 1提问于2011-05-09得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
