为什么在Bootstrap 5中nav和section重叠
在Bootstrap 5中，nav和section元素可能会重叠的原因通常与CSS的层叠上下文（stacking context）和元素的定位有关。以下是一些可能导致重叠的原因以及相应的解决方法：
原因1：缺少适当的容器或布局类
Bootstrap使用网格系统来组织页面布局。如果没有正确使用.container或.row类来包裹内容，可能会导致元素重叠。
解决方法：
确保nav和section元素都被适当的容器和行类包裹。
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<!-- 导航栏内容 -->
</nav>
<div class="row">
<section class="col-md-8">
<!-- section内容 -->
</section>
</div>
</div>原因2：绝对定位或固定定位
如果nav或section使用了绝对定位（position: absolute;）或固定定位（position: fixed;），它们可能会脱离正常的文档流并重叠。
解决方法： 调整定位属性，确保它们不会相互重叠。
nav {
position: relative; /* 或其他合适的定位方式 */
}
section {
position: relative; /* 或其他合适的定位方式 */
}原因3：z-index属性
z-index属性控制元素的堆叠顺序。如果nav和section的z-index值设置不当，可能会导致重叠。
解决方法：
调整z-index值，确保它们不会相互覆盖。
nav {
z-index: 1000;
}
section {
z-index: 1;
}原因4：响应式布局问题
在不同的屏幕尺寸下，Bootstrap的网格系统可能会导致元素重叠。
解决方法： 使用Bootstrap的响应式类来确保在不同屏幕尺寸下元素不会重叠。
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<!-- 导航栏内容 -->
</nav>
<div class="row">
<section class="col-md-8 col-lg-6">
<!-- section内容 -->
</section>
</div>
</div>参考链接
通过以上方法，可以有效解决Bootstrap 5中nav和section元素重叠的问题。确保正确使用Bootstrap的布局类和CSS定位属性是关键。
相关·内容
2回答
我正在尝试创建一个模板，其中有两个列在一个面板中。我正在使用普通的Bootstrap v3.3.7。下面你可以找到我尝试过的：
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-12"
浏览 2提问于2017-12-04得票数 0
回答已采纳
我最近一直在做一些学习，bootstrap就是其中的一部分。我有一个简单的(但很长的)网页，我认为使用scrollspy会很好，但我就是不能让任何东西正常工作。我想我应该从一些有效的东西开始，但仍然有麻烦。主要的问题是文本和scrollspy是重叠的。我想也许是我搞砸了什么。
所以..。
我创建了一个开箱即用的MVC4站点。所以我找到了这个简单的示例，并用html代码替换了About.cshtml页面的内容，并在此之前添加了一个部分来容纳css数据。这就是我所拥有的：
@{
ViewBag.Title = "About";
}
<style>
.co
浏览 1提问于2014-09-19得票数 0
4回答
我在以下代码中做了3div。第一个有导航元素，另外两个有分段元素。
如果您运行上述代码，您将看到nav和这两个部分的边框。我的疑问是，第一节左元素的边框应该在导航栏的右边边框。但是由于它不存在(通过运行代码可以看到)，这意味着div "a“和"b”是重叠的。我的思维方式正确吗?如果我是对的，为什么CSS是这样设计的重叠的div。
事实上，这与在CSS中引入div的原因相矛盾。
nav {
float: left;
width: 200px;
border: 1px solid black;
}
section {
border: 3px solid red;
浏览 10提问于2016-08-17得票数 4
回答已采纳
我在bootstrap 5导航栏中遇到了一个问题。我正在尝试创建一个与bootstrap 5响应式导航栏。我希望导航栏的标志将在左侧和导航链接在右侧。但当我使用'navbar-expand-lg‘类时，它会将logo和导航链接都对齐在左侧。
我在ul标记中使用了ml-auto类。但它并没有起作用。有谁能帮帮我吗？
注意:我认为mr-auto和ml-auto类在bootstrap 5中不能很好地工作。
.custom {
background-color: #333333;
}
.logo {
width: 100px;
}
li a {
color: w
浏览 0提问于2020-12-20得票数 0
1回答
我想调整两个元素的排列:左手导航和主要内容div是相互重叠的。我对他们没有什么特殊的条件，只是应该在没有覆盖的列中彼此相邻。
这是具有导航和滚动间谍的代码。您必须运行代码段并使用完整的页面链接来查看内容。
$(function ()
{
$('[data-toggle="popover"]').popover()
})
/* CSS FOR SCROLLSPY */
body
{
position: relative;
}
浏览 1提问于2020-12-31得票数 1
回答已采纳
我对html和css很陌生。我正在练习构建html布局，我遇到了一些困难。我不知道如何使页脚和区域与导航的左边对齐。这些总是与正确的百分比宽度重叠。这一切为什么要发生？
body {
background: gray;
}
section {
background: red;
display: block;
width: 70%;
position: absolute;
top: 0;
right: 0;
}
footer {
background: green;
display: block;
width: 70%;
padding: 20
浏览 6提问于2022-07-20得票数 1
回答已采纳
3回答
为什么部分标记不在导航标记下显示我的背景色和边框？有没有人能帮我。我已经解决这个问题有一段时间了。
nav{
border:1px solid black;
background-color:whitesmoke;
}
a:hover{
color:black;
}
section{
border:1px solid black;
background-color:yellow;
}
<html>
<head>
<meta charset="UTF-8">
<title
浏览 0提问于2018-03-28得票数 0
我的wordpress页面内容和标题与导航重叠。导航位于页眉内部，页面内容和标题在模板文件中，我对页眉设置了样式，但什么也没有发生。这就是我的问题：
和我的模板代码：
<section>
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-6 col-xs-12">
<?php if ( have_posts() ) : whil
浏览 0提问于2018-02-08得票数 0
我有一个包含React-Bootstrap导航栏属性的json文件。我得到的错误是“列表中的每个孩子都应该有一个唯一的"key”道具。“我已尝试在Nav.Link和NavDropdown中添加key={section.id}。在NavDropdown.Item中，我使用了key={item.id}。错误仍然会发生，并且键不会出现在元素中。我意识到这并不是用这种方式构建的，我希望在将来用某种CMS来构建json。
import Navbar from 'react-bootstrap/Navbar';
import Nav from 'react-bootstra
浏览 11提问于2020-07-29得票数 0
1回答
我刚开始吃香草巧克力。我有一个导航栏，链接到各部分。我想在这个部分一开始就使类活动起来。如果没有活动部分，则删除活动类。找到这样一个，但有一个缺点。如果我处于非活动部分，活动类将与前一个活动部分保持不变。
const links = document.querySelectorAll('.nav-link');
const sections = document.querySelectorAll('.forJS');
function changeLinkState() {
let index = sections.length;
wh
浏览 2提问于2021-02-12得票数 2
回答已采纳
2回答
使用滚动间谍更改导航条背景类。
、、、、
我是工作在一个在Bootstrap 4的网页，其中有部分与光明和黑暗的背景和一个固定的肚脐。导航条是暗的(有css类bg-dark)，虽然它很容易在光部分可见，但它与黑暗部分是无法区分的。
我已经将Bootstrap的滚动间谍添加到页面中，但是它所做的是将active类添加到导航栏项中，如下所示：
.page-section {
padding: 70px 10px
}
.page-section.bg-dark * {
color: #fff;
}
<link rel="stylesheet" href="https://maxcdn.bootst
浏览 1提问于2018-08-31得票数 0
回答已采纳
1回答
在我使用bootstrap.min.css之前，但是现在我应该使用引导v3.2.0.css，因为bootstrap Thumbnail，但是当我使用Bootstrap 3.2.0时，我的顶部菜单不能工作，我怎么可以同时使用它们呢？引导3.2.0缩略图滑块和顶部菜单；在船头是我的顶部菜单，使用bootstrap.min.css，但不使用引导v3.2.0.css
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
浏览 0提问于2014-07-15得票数 1
回答已采纳
1回答
我看了看其他帖子，似乎找不到这个问题的答案。
我正在试着用Bootstrap做一个网页。我想要一个垂直的nabvar固定在左侧，占3列，在右侧的内容，占9列。我已经实现了scrollspy来在滚动时更新导航栏。
在我缩小屏幕之前，它工作得很好。我的理解是，它应该将列放在彼此的顶部。如果我从列中删除affix属性，它会正确更新，但导航栏没有修复，所以scrollspy没有意义。
下面是我的代码：
ul.nav-pills {
padding-top: 20px;
top: 20px;
}
.item {
padding-top: 70px;
}
#content {
ma
浏览 1提问于2018-02-18得票数 0
2回答
$(window).load(function () {
// body...
$(".nav li").click(function () {
alert('captain');
$(".nav li").removeClass('active');
$(this).addClass('active');
})
})
section{
padding-top: 80px;
min-height: 100vh;
}
a:focus{
outline: none;
浏览 3提问于2016-04-14得票数 1
回答已采纳
1回答
我正在使用bootstrap的ScrollSpy插件创建一个基本的滚动导航。我已经在我的身体中设置了数据间谍和数据目标，但是当我滚动时，活动链接样式没有被应用。
这是我当前代码的链接(这里链接了引导css和js文件)
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twi
浏览 0提问于2017-02-02得票数 0
2回答
我写了下面的导航条形码使用引导4.1。我不知道为什么3-栏图标将不会显示在右侧2。为什么点击链接将不能正确启动。我必须点击链接，然后在窗口的任何其他地方，使链接成为下划线。3.我无法将菜单项与右边对齐
$('.nav-link').on('click', function () {
$('.active').removeClass('active');
$(this).addClass('active');
});
<link href="https://cdnjs.cloudflare.
浏览 2提问于2017-04-05得票数 0
回答已采纳
我目前正在学习如何使用php和模块化技术来制作网页。之前，我设法在一个php文件上运行bootstrap。但是当我在我的目录中创建了一个名为' layout‘的文件夹，然后在layout文件夹中，我创建了一个名为'index.php’的新php文件用于web显示，并且我在layout/index.php中给出了bootstrap和stylesheet，结果发现bootstrap不起作用。 Take a look in my directory 这是我的index.php <?php
$modul =isset($_GET['modul'])?$_G
浏览 18提问于2019-04-30得票数 2
回答已采纳
5回答
如果我有以下条件，链接文本会很漂亮地换到下一行：
<div class="sidenav" id="site-navbar">
<ul class="nav nav-pills nav-stacked" >
<li><a href="#h0">A very very very very very very very very very long thing</a></li>
但是，如果我添加了词缀，文本将保留在同一行，并重叠到主要内容列上：
<
浏览 0提问于2017-08-11得票数 7
我在一个闪亮的应用程序中使用流体行和列布局。当我缩小屏幕大小时，两列中的元素重叠。如果它们是两个不同的列，并且使用流体行，则内容不应该重叠。下面是密码。我有两个宽度分别为4和8的列，它们在正常屏幕大小下工作得很好，但一旦我将窗口最小化，它们就会重叠。
library(shiny)
library(shinyjs)
ui <- navbarPage(
"Bootstrap scrollspy on multiple tabs",
id = "navbar",
header = div(
useShinyjs(),
extendS
浏览 0提问于2019-03-22得票数 4
回答已采纳
我用的是Bootstrap v4.0.0
我已经包含了必要的JavaScript文件(jQuery、popper和Bootstrap)以及必要的CSS文件。
这是HTML：
<body data-spy="scroll" data-target="#my-navbar-collapse" data-offset="100">
<!-- ... -->
<div class="collapse navbar-collapse" id="my-navbar-collapse"
浏览 0提问于2018-02-08得票数 18
回答已采纳
我正在做一个网站，在Bootstrap 4，有部分与光明和黑暗的背景和一个固定的肚脐。
导航条是暗的(有css类bg-dark)，虽然它很容易在光部分可见，但它与黑暗部分是无法区分的。
对于这个问题，我找到了一个简单的解决方案:当部分到达页面顶部时，我使用自定义数据属性data-navbar-classes和值navbar-light bg-light和navbar-dark bg-dark之一将两个类从一个节传递到一个导航栏。
脚本中有一个bug，我找不到它：
var toggleNavbarClasses = function() {
var navbarHeight = $(&#
浏览 0提问于2018-09-03得票数 0
回答已采纳
1回答
我正在制作一个网页，我面临这个问题，我有一个导航条，是固定和工作良好。我现在有两个部分，当滚动时，第一个部分工作得很好，但是另一个部分是重叠的Nav，我将通过JSFiddle向您展示。
到目前为止，我尝试的是将.items显示作为块，但没有得到解决方案。试着用位置作为绝对，但它影响了我的观点。所以现在一切都很好，除了第2部分( testimonial-one是重叠的)，第一个部分工作得很好。
我也尝试过在我的引导导航中使用这个导航固定顶，但是它没有成功。
.navbar { padding: 26px !important; position: fixed!important; width
浏览 0提问于2018-04-11得票数 0
回答已采纳
1回答
在我的引导导航栏中，有一个菜单按钮，当屏幕变得太小时，如果你在移动设备上，它就会出现。它工作得很好，但菜单按钮始终显示。即使您在全屏桌面上，也会有一个菜单按钮和菜单项。在手机上，菜单项只在你点击菜单时显示，所以这没问题。 我试着在菜单项显示时向右移动，这很好用，但之后，菜单按钮总是显示出来。 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bo
浏览 27提问于2019-06-28得票数 1
回答已采纳
1回答
3滚动间谍无法工作
、、、、
我只是无法从引导3获得滚动间谍的工作。我已经试过了从众多论坛上读到的所有东西，包括stackoverflow的答案，但都没有成功。
所以，如果有人能看到这些代码并提供帮助，那就太好了。
下面是代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initi
浏览 1提问于2013-09-22得票数 0
回答已采纳
我在Rails应用程序中使用了Bootstrap主题(来自)，但由于某些原因，导航栏没有响应。CSS适用于除响应式导航栏之外的所有其他功能。
对于传统的html文件，它工作得很好，但当我将它包含在Rails布局中时(如下所示)，它不会响应，也不会显示您通常看到的右对齐的jQuery下拉菜单。
下面是我如何将js和css包含在我的布局的头部，employees.html.erb
<%= stylesheet_link_tag "scaffolds.css.css", :media => "all" %>
<%= stylesheet
浏览 0提问于2013-06-28得票数 0
回答已采纳
我正在使用Bootstrap的选项卡组件，并且很难将蓝色Log 按钮刷新到nav-tabs的右侧。我尝试过各种各样的东西，但很明显我不明白为什么它不能定位到我想要的位置。
下面是我想要做的事情的图片：
HTML:
<section class="container">
<ul class="nav nav-tabs pt-5">
<li class="nav-item"><a class="nav-link active" href="#">Ho
浏览 0提问于2019-01-25得票数 7
回答已采纳
2回答
我正在尝试学习Bulma，我想用这个布局展示一个简单的页面：
<header>
<hero>
<section>
<footer>
我不明白为什么它们相互重叠，而不是清楚地一个在另一个之下。
有一个虚拟容器，它显然被放错了位置，并被头部隐藏起来。重叠也很明显，搜索栏位于页脚和英雄的上方。
<nav class="navbar is-primary is-fixed-top has-text-white">
<div class="container">
<di
浏览 0提问于2018-02-09得票数 0
1回答
我想在我的布局中添加一个水平导航栏( )，我不明白为什么它如此丑陋：
<!DOCTYPE htwml PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta charset="utf-8">
<he
浏览 1提问于2017-02-26得票数 1
回答已采纳
我正在制作一个投资组合，但是我遇到了使用Bootstrap 4时遇到的两个问题：
将导航条链接放置在右边
还有，靴带卷轴间谍。
有人能帮我解决以上两个问题吗？
我已经尝试过来自Bootstrap和w3schools站点的代码，但是没有任何效果。
下面是我的代码：
CSS代码：
body {
scroll-behavior: smooth;
font-family: "Spectral", sans-serif;
height: 100%;
position: relative;
background: linear-gra
浏览 0提问于2019-01-04得票数 0
我正在用bluemix部署一个非常简单的node.js应用程序。我正在使用ejs和bootstrap在顶部创建一个导航栏。它可以在我本地版本的代码上运行，但当我将它推送到bluemix并进行部署时，导航栏不会展开。有趣的是，浏览器看到的两个应用程序的源代码是完全相同的。代码如下：
<!-- views/pages/start.ejs -->
<!DOCTYPE html>
<html lang="en">
<head>
<!-- views/partials/head.ejs -->
<meta charse
浏览 12提问于2016-08-04得票数 0
回答已采纳
1回答
我一直在尝试创建两个引导导航栏。第一个在中间有网站域名，还有一个下拉菜单可以转到其他部分。然后每个部分都有自己的子栏和自己的链接。 它目前看起来是这样的。 📷 这很棒，也正是我想要的。但是，当我单击品牌名称上的下拉菜单时，它会被推到左侧，并与另一个导航栏重叠。 📷 我还想把我的主题选择器和用户配置文件下拉到顶部导航栏，对齐在屏幕的右边。但每次我尝试它都会破坏顶部导航栏和用户配置文件下拉菜单，得到相同的重叠问题。 <nav id="topnav" class="navbar navbar-expand-lg navbar-dark bg-primary&#
浏览 7提问于2019-02-12得票数 0
回答已采纳
我在一个网站上工作，我的个人投资组合网站与bootstrap4，我有一个很好的想法，改变我的网站的不同div的导航栏颜色，我知道我们已经使用.I的偏移量和scrollTop函数，我尝试了，但它不能正常工作。我想知道是否有人能给我指出正确的方向，如何解决这个问题。 以下是网站代码： <!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
&l
浏览 46提问于2021-01-18得票数 3
回答已采纳
1回答
我使用bootstrap编写了一个菜单，可以使用JQuery滚动到页面的不同部分，但在滚动之前的一瞬间，主屏幕会闪现。我不知道它为什么会发生，也不知道如何阻止它。
$("#butHome").click(function() {
$(".nav li").removeClass("active");
$(this).addClass("active");
$('html, body').animate({
scrollTop: $("#home").offset().top
}, 300);
浏览 0提问于2015-12-26得票数 0
1回答
我有一个静态侧栏滚动，但当它到达页脚，它重叠。有什么办法让我停止滚动到脚上吗？我知道这可能是一个简单的概念，但我对JQuery中的滚动事件没有多少经验，所以任何帮助都是非常棒的。
请在下面找到我的代码和CodePen。
<div id="main">
<div class="spacing">CONTENT HERE TO SHOW HOW THE SCROLL WILL WORK. PLEASE SCROLL DOWN</div>
<div class="container">
浏览 1提问于2016-04-06得票数 0
回答已采纳
1回答
我正在页的左上角开发一个导航栏。为了防止它将内容移到较低的位置，我将位置设置为绝对值。我现在的问题是，每个项目都是重叠的。
.nav-item {
display: flex;
justify-content: center;
position: absolute;
top: 0;
right: 10px;
}
.nav-item:hover p {
color: #909590;
}
<nav>
<a href="index.html">
<section
浏览 2提问于2022-06-08得票数 1
回答已采纳
1回答
如何向元素散列位置添加偏移量，使窗口顶部的导航栏不会与内容重叠？
<nav id="nav">
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
</nav>
<main>
<section id="home">
<h2>Welcome to e
浏览 18提问于2020-06-25得票数 0
3回答
无论我做什么，我的h1标签都不会显示。我正在使用bootstrap 4。我不知道为什么会发生这种情况，因为我之前能够添加占位符文本。
body {
background-color: #363636;
}
.navbar-nav > .nav-item > a {
color: #FF20E9;
}
.navbar-nav > .nav-item > a:hover {
color: #A60F97;
transition: 0.5s;
}
.navbar {
background-color: #FD9DFF;
}
浏览 0提问于2020-08-01得票数 2
1回答
嗨，我是在视频工作室工作的。我试图在代码的和部分进行设计，但它不起作用(我无法访问id="TikNehesTitle“。我在这里添加了HTML和CSS (在注释中)代码。谢谢你的回应。
我的HTML代码：
<!DOCTYPE html>
<html lang="he">
<head>
<title></title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.js"&g
浏览 1提问于2016-04-05得票数 1
1回答
我有一个闪亮的应用程序，应该响应，因为我们希望最终用户使用它在笔记本电脑和ipad上。下面是这款闪亮应用的导航栏布局。现在，当我改变屏幕尺寸时，我希望导航栏菜单转换为汉堡菜单，而不是将一个菜单与另一个菜单对齐。 例如:我正在寻找的最终结果是这样的：https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_topnav library(shiny)
library(shinyjs)
ui <- navbarPage(
"Bootstrap scrollspy on multiple tabs",
i
浏览 25提问于2019-04-05得票数 1
回答已采纳
我有一个问题--我正在尝试将navbar品牌和其他品牌分开。我想有徽标-所以导航栏-品牌和左侧的所有菜单项在菜单的右侧，我已经尝试使用flex，因为它在引导文档中说，但我不能实现我想要的:)
请帮助:P
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name=
浏览 39提问于2018-12-12得票数 -1
1回答
我正试图用nav堆叠成一个垂直菜单与导航药丸。问题是它似乎不起作用。它保持“水平”值。我已经找到了解决方案，没有实现nav堆叠，但我需要这样使用它。
为此目的：
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0
浏览 1提问于2018-03-12得票数 0
回答已采纳
我正在建立一个网站，我使用引导带的造型。
到目前为止，它只是一个标题和导航栏，但它没有显示任何CSS。如果我打开这个，整个肚脐是垂直堆放的，我也不明白为什么我的“联系人”按钮会缩进旁边的子弹。我能在这里得到一些信息吗？请告诉我是否需要进一步的细节来评估局势。
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
浏览 5提问于2022-05-03得票数 0
3回答
我在这里有一个情况，我有一个div，就是保证金:汽车，让它居中。
这样做很好，但是当我调整窗口的大小时，我希望它在达到某个空白时停止对中。
我的想法是我左边有一个浮动的物体，我不想它被重叠。
有什么建议吗？
谢谢
编辑：添加的代码
<nav id="servicos_nav">
<div id="full">
...
</div>
<div id="minimized">
...
</div>
</nav>
&l
浏览 3提问于2012-02-04得票数 0
回答已采纳
2回答
我正在尝试创建一个有不同部分的页面，第一部分显示菜单和背景图像，然后在它下面有一个白色部分，高度为500px。
由于某些原因，我似乎不能让我的形象适合一个好的方式。现在它甚至没有给我看图片，我也不知道为什么。
如何使图像适合屏幕，然后在其下方添加可滚动到的白色部分？
* {
margin: 0;
padding: 0;
}
#firstSection {
background-image: url("https://i.imgur.com/xZjqUcR.png") no-repeat;
background-size: cover;
浏览 28提问于2019-11-05得票数 0
4回答
引导肚脐不膨胀
、、、、
我试着用引导带制作一个可折叠的肚脐条，但是不管我尝试了多少次，也不管我检查了多少次，我都无法让点击按钮来展开导航条。
这是我的HTML：
<section id="upper-section">
<div class="container mini-container">
<nav class="navbar navbar-default navbar-static-top">
<div class="container-fluid">
浏览 2提问于2015-12-02得票数 3
回答已采纳
2回答
如何将侧边栏重叠在导航条上
、、、、
对不起，我不能在没有更高声誉的情况下发布图片，所以我把它们链接到下面：
私营部门司：
HTML：
好的，PSD截图就是我想要的。
HTML屏幕截图是它的当前形式。
如您所知，侧栏当前位于橙色栏(nav)和灰色栏(横幅)下面。我知道有一种方法可以使它的位置是绝对的，并将其覆盖在顶部，但是看到它建立在一个响应性的网格上，我认为这会毁了它。
有没有人知道，无论如何，重叠的侧边栏，就像它显示在psd，而不破坏反应？
我愿意听取任何建议。
谢谢!
代码：
<div class="container">
<div class="row"
浏览 4提问于2013-11-12得票数 1
回答已采纳
1回答
引导数据-偏移量-底部
、、、
我和 data-offset-bottom有点问题。因此，我创建了一个小示例来说明这个问题。被窥探的容器停在正确的位置，但当向上滚动时，它会跳跃。
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
body {
position: relative;
color: white;
}
.affix {
top: 50px;
width: 100%;
z-index: 9999 !important;
}
.affix ~ .cont
浏览 2提问于2016-05-09得票数 2
我想添加一个填充到我的页面滚动功能。页面示例：
剧本：
//jQuery to collapse the navbar on scroll
$(window).scroll(function() {
if ($(".navbar").offset().top > 50) {
$(".navbar-fixed-top").addClass("top-nav-collapse");
} else {
$(".navbar-fixed-top"
浏览 1提问于2016-06-30得票数 0
回答已采纳
1回答
我试图添加一个自定义菜单切换到Bootstra4.0的Navbar菜单。我使用的代码来自Codeply 。我正在尝试应用X切换风格到我的网站的引导导航栏。这是我现在所拥有的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-w
浏览 0提问于2018-07-23得票数 1
回答已采纳
1回答
我一直在使用引导页上提供的下载现成的引导程序v4.1.3的编译代码，在阅读了如何处理导航和按钮之后，我遇到了一个问题。
在我的元标签下面有css链接
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="">
<meta http-equiv="X-UA-Compatible" content="IE=edge
浏览 0提问于2018-11-07得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
