纵向导航栏使用navbar-nav-scroll溢出截断问题

news2024/10/6 6:42:31

项目场景:

项目首页组件:Bootstrap-4.6.2、JQuery 3.7.1
测试浏览器:Firefox126.0.1、Microsoft Edge125.0.2535.67
IDE:eclipes2024-03.R

在编写CRM的工作台主页面时,由于该页面使用的是较旧的技术,所以打算使用Bootstrap重写响应式页面,主要使用了Bootstrap的格栅布局系统。在编写左侧纵向导航栏时,发现添加滚动条后,导航栏下面缩短了一部分流出大部分空白,使得页面不美观。

溢出截断
问题代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="/crm-core/css/bootstrap_css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="/crm-core/js/jquery/jquery-3.7.1-min.js"></script>
<!-- bootstrap.bundle.js包含了popper.min.js,这个是下拉菜单的依赖 -->
<script type="text/javascript" src="/crm-core/js/bootstrap_js/bootstrap.bundle.js"></script>
<script type="text/javascript">
   ...
</script>
</head>
<body>
	...
		<!-- 中间部分 -->
		<div id="center" style="position: absolute; top: 50px; bottom: 30px; left: 0px; right: 0px;">
		<!-- 导航 -->
		<div class="col-2 border-right navbar-nav-scroll" style="height: 100%;">
                <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
                    <button class="nav-link active" id="v-pills-home-tab" data-toggle="pill" data-target="#v-pills-home" type="button"
                        role="tab" aria-controls="v-pills-home" aria-selected="true">工作台</button>
                </div>
            </div>
			<!-- 右侧框架栏 -->
			<div class="col-10 iframe-container">
				<div class="embed-responsive embed-responsive-16by9">
					<iframe class="embed-responsive-item border border-white" name="workareaFrame"></iframe>
				</div>
			</div>
		</div>
	</div>
</body>
</html>

问题描述

经过测试后,发现是在添加了navbar-nav-scroll后出现截断问题,但是该类如果删除会导致在滚动页面时右侧的<iframe>也会跟着滚动,这不是我所期望的,我想要的只是左侧的导航栏在溢出时滚动,而右侧的<iframe>框架只是用来显示左侧各导航栏对应的页面。
在尝试不再使用Flex布局时,移除了flex-column相关内容后,又出现了按钮组垂直排列错位、按钮无法点击跳转链接、导航栏点击动态特效消失等问题。


原因分析:

尝试了诸多方法,官方文档也没有给出相关问题的解决方案,AI也没有给出准确的解决方案,在问了别人说的可能是Flex 布局下居中溢出滚动截断问题,看了几篇文章 ,不过在尝试后也并没有达到预期效果,只是知道不应该用Flex布局。
Bootstrap官网给出的示例中没有给出纵向导航栏跳转链接等相关内容,而由于不懂前端,只好复制过来稍微改了改,存在属性冲突的情况。
既然官方给的类无法满足要求,只能用js代码实现。


解决方案:

  1. 放弃使用Flex相关代码,以Grid布局进行排版,并指定垂直高度
  2. 使用列表组代替nav,通过给<a>标签绑定"btn"类得到一组按钮列表组。
  3. 使用js代码实现纵向导航栏点击的动态效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="/crm-core/css/bootstrap_css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="/crm-core/js/jquery/jquery-3.7.1-min.js"></script>
<!-- bootstrap.bundle.js包含了popper.min.js,这个是下拉菜单的依赖 -->
<script type="text/javascript" src="/crm-core/js/bootstrap_js/bootstrap.bundle.js"></script>
<script type="text/javascript">
    // 通过js发送ajax请求,获取session中的用户姓名
    $(function() {
	$.ajax({
	    url : '/crm-core/workbench/getName.do',
	    type : "post",
	    dataType : "json",
	    success : function(data) {
		console.log(data);
		$("#userName").text(data.userName);
	    }
	})
    });

    // 安全退出功能
    $(document).ready(function() {
	// 等模态框加载完成后再调用
	$('#exitModal').on('shown.bs.modal', function() {
	    $('#logoutBtn').on('click', function() {
		window.location.href = "/crm-core/settings/qx/user/logout.do";
	    });
	});
    });

    //页面加载完毕
    $(function() {
	// 一登录就在框架窗口中显示工作台
	window.open("/crm-core/workbench/main/index.do", "workareaFrame");

    });
    // 通过js代码实现导航栏点击特效
    // 导航栏点击动态
    document.addEventListener('DOMContentLoaded', function() {
	var buttonGroup = document.getElementById('myButtonGroup');
	var buttons = buttonGroup.getElementsByClassName('btn');
    // 初始化点击事件  
	for (var i = 0; i < buttons.length; i++) {
	    buttons[i].addEventListener('click', function(e) {
		// 移除组内所有按钮的 active 类  
		for (var j = 0; j < buttons.length; j++) {
		    buttons[j].classList.remove('active');
		}
		// 给当前点击的按钮添加 active 类  
		this.classList.add('active');

		// 阻止事件冒泡到按钮组外部(可选,如果外部有事件监听器)  
		e.stopPropagation();
	    });
	}
	// 监听文档点击事件以取消按钮选中(可选,如果您想要这样的行为)  
	document.addEventListener('click', function(e) {
	    // 检查点击是否在按钮组内  
	    if (!buttonGroup.contains(e.target)) {
		// 移除组内所有按钮的 active 类  
		for (var i = 0; i < buttons.length; i++) {
		    buttons[i].classList.remove('active');
		}
	    }
	});
    });
</script>
<style>
/* 自定义css */
.nav-left {
	height: 700px;
	overflow-y: scroll;
	padding-left: 15px;
}

.btn-secondary {
	color: #fff;
	background-color: #6c757d;
	border-color: #6c757d;
	transition: background-color 0.3s ease; /* 添加过渡效果 */
}

.btn-secondary.active {
	color: #fff;
	background-color: #007bff;
	border-color: #007bff;
}

.btn-secondary:hover {
	background-color: #606870; /* 鼠标悬停时背景色稍深 */
}
</style>
</head>
<body>
	<!-- 我的资料 -->
	<div class="modal fade" id="myInformation" role="dialog">
		<div class="modal-dialog" role="document" style="width: 30%;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">×</span>
					</button>
					<h4 class="modal-title">我的资料</h4>
				</div>
				<div class="modal-body">
					<div style="position: relative; left: 40px;">
						姓名:<b>张三</b><br> <br> 登录帐号:<b>zhangsan</b><br> <br> 组织机构:<b>1005,市场部,二级部门</b><br> <br>
						邮箱:<b>zhangsan@bjpowernode.com</b><br> <br> 失效时间:<b>2017-02-14 10:10:10</b><br> <br> 允许访问IP:<b>127.0.0.1,192.168.100.2</b>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
				</div>
			</div>
		</div>
	</div>
	<!-- 修改密码的模态窗口 -->
	<div class="modal fade" id="editPwdModal" role="dialog">
		<div class="modal-dialog" role="document" style="width: 70%;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">×</span>
					</button>
					<h4 class="modal-title">修改密码</h4>
				</div>
				<div class="modal-body">
					<form class="form-horizontal" role="form">
						<div class="form-group">
							<label for="oldPwd" class="col-sm-2 control-label">原密码</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="oldPwd" style="width: 200%;">
							</div>
						</div>
						<div class="form-group">
							<label for="newPwd" class="col-sm-2 control-label">新密码</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="newPwd" style="width: 200%;">
							</div>
						</div>
						<div class="form-group">
							<label for="confirmPwd" class="col-sm-2 control-label">确认密码</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="confirmPwd" style="width: 200%;">
							</div>
						</div>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
					<button type="button" class="btn btn-primary" data-dismiss="modal" onclick="window.location.href='../login.html';">更新</button>
				</div>
			</div>
		</div>
	</div>
	<!-- 退出系统的模态窗口 -->
	<div class="modal" tabindex="-1" id="exitModal">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title">安全退出</h5>
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
				</div>
				<div class="modal-body">
					<p>您确定是否要安全退出系统</p>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
					<button type="button" class="btn btn-primary" data-dismiss="modal" id="logoutBtn">确定</button>
				</div>
			</div>
		</div>
	</div>
	<!-- 顶部导航栏 -->
	<div class="container-fluid h-100">
		<div class="row sticky-top">
			<div class="col-12">
				<nav class="navbar navbar-expand-lg  navbar-light bg-light">
					<a class="navbar-brand" href="#">CRM&nbsp;</a><span>&copy;2030&nbsp;UMBRELLA</span>
					<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText"
						aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
						<span class="navbar-toggler-icon"></span>
					</button>
					<div class="collapse navbar-collapse" id="navbarText">
						<ul class="navbar-nav mr-auto">
							<li class="nav-item active"><a class="nav-link" href="#"><span class="sr-only">(current)</span></a></li>
							<li class="nav-item"><a class="nav-link" href="#"></a></li>
							<li class="nav-item"><a class="nav-link" href="#"></a></li>
						</ul>
						<ul class="navbar-nav mr-right">
							<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" data-toggle="dropdown" id="userName"
								role="button" aria-expanded="false"></a>
								<div class="dropdown-menu dropdown-menu-sm-right">
									<a class="dropdown-item" href="#">个人中心</a> <a class="dropdown-item" href="#">其他操作</a> <a class="dropdown-item"
										href="#">修改密码</a>
									<div class="dropdown-divider"></div>
									<a class="dropdown-item" data-toggle="modal" data-target="#exitModal">安全退出</a>
								</div></li>
						</ul>
					</div>
				</nav>
			</div>
		</div>
		<!-- 中间部分 -->
		<!-- 左侧导航栏 -->
		<div class="row" style="height: 700px;">
			<div class="col-2 nav-left btn-group-vertical align-self-start" id="myButtonGroup" role="navigation">
				<a class="btn btn-light" href="/crm-core/workbench/main/index.do" role="tab" target="workareaFrame">
				    <span><img src="/crm-core/image/icons/house-fill.svg"></img>&nbsp;</span>工作台</a> 
				<a class="btn btn-light" href="#list-profile" role="tab" target="workareaFrame">
				    <span> <img src="/crm-core/image/icons/activity.svg"></img>&nbsp;</span>动态</a> 
				<a class="btn  btn-light" href="#list-messages" role="tab" data-toggle="button-group" target="workareaFrame">
				    <span><img src="/crm-core/image/icons/shield-fill-check.svg"></img>&nbsp;</span>审批</a> 
				<a class="btn  btn-light" href="#list-settings"	role="tab" data-toggle="button-group" target="workareaFrame">
				    <span><img src="/crm-core/image/icons/people-fill.svg"></img>&nbsp;</span>客户公海</a> 
				<a class="btn btn-light" href="/crm-core/workbench/activity/index.do" role="tab" data-toggle="button-group" target="workareaFrame">
				    <span><img src="/crm-core/image/icons/buildings-fill.svg"></img>&nbsp;</span>市场活动</a> 
				<a class="btn  btn-light" href="#list-settings"	role="tab" data-toggle="button-group" target="workareaFrame">
				    <span><img src="/crm-core/image/icons/collection-fill.svg"></img>&nbsp;</span>线索(潜在客户)</a> 
				<a class="btn  btn-light" href="#list-settings" role="tab" data-toggle="button-group" target="workareaFrame">
				    <span><img src="/crm-core/image/icons/person-fill-up.svg"></img>&nbsp;</span>客户</a> 
				<a class="btn  btn-light" href="#list-settings" role="tab" data-toggle="button-group" target="workareaFrame">
				    <span><img src="/crm-core/image/icons/person-lines-fill.svg"></img>&nbsp;</span>联系人</a> 
				<a class="btn  btn-light" href="#list-settings" role="tab" data-toggle="button-group" target="workareaFrame">
				    <span><img src="/crm-core/image/icons/hand-thumbs-up-fill.svg"></img>&nbsp;</span>交易(商机)</a> 
				<a class="btn btn-light" href="#list-settings" role="tab" data-toggle="button-group" target="workareaFrame">
				    <span><img src="/crm-core/image/icons/telephone-forward-fill.svg"></img>&nbsp;</span>售后回访</a> 
				<a class="btn btn-light" href="#list-settings" role="tab" data-toggle="button-group" target="workareaFrame">
				    <span><img src="/crm-core/image/icons/bar-chart-line-fill.svg"></img>&nbsp;</span>统计图表</a> 
				<a class="btn btn-light" href="#list-settings" role="tab" data-toggle="button-group" target="workareaFrame">
				    <span><img src="/crm-core/image/icons/clipboard2-fill.svg"></img>&nbsp;</span>报表</a> 
				<a class="btn btn-light" href="#list-settings" role="tab" data-toggle="button-group" target="workareaFrame">
				    <span><img src="/crm-core/image/icons/receipt.svg"></img>&nbsp;</span>销售订单</a> 
				<a class="btn btn-light" href="#list-settings" role="tab" data-toggle="button-group" target="workareaFrame">
				    <span><img src="/crm-core/image/icons/rocket-fill.svg"></img>&nbsp;</span>发货单</a>
				<a class="btn btn-light" href="#list-settings" role="tab" data-toggle="button-group" target="workareaFrame">
				    <span><img src="/crm-core/image/icons/bar-chart-steps.svg"></img>&nbsp;</span>跟进</a> 
				<a class="btn btn-light" href="#list-settings" role="tab" data-toggle="button-group" target="workareaFrame">
				    <span><img src="/crm-core/image/icons/virus.svg"></img>&nbsp;</span>产品</a> 
				<a class="btn btn-light" href="#list-settings" role="tab" data-toggle="button-group" target="workareaFrame">
				    <span><img src="/crm-core/image/icons/currency-bitcoin.svg"></img>&nbsp;</span>报价</a>
			</div>
			<!-- 右侧框架栏,显示导航栏对应的页面 -->
			<div class="col iframe-container">
				<div class="embed-responsive embed-responsive-16by9">
					<iframe class="embed-responsive-item border border-white" name="workareaFrame"></iframe>
				</div>
			</div>
		</div>
	</div>
</body>
</html>

当前的解决方案在一定程度上牺牲了响应式的布局优势,后期如果有更好的解决方案再更新。

相关文章

一下几篇是在排错过程中看到的几篇文章,对Flex布局跟Grid布局讲的很好。

1. flex布局看这一篇就够了
2. column分栏布局只是文字布局吗_「一劳永逸」48张小图带你领略flex布局之美
3. 【布局技巧】Flex 布局下居中溢出滚动截断问题

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1800511.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【Java数据结构】二叉树详解(三)

&#x1f512;文章目录&#xff1a; 1.❤️❤️前言~&#x1f973;&#x1f389;&#x1f389;&#x1f389; 2. 检查两颗树是否相同 3. 另一颗树的子树 4.翻转二叉树 5.对称二叉树 6.判断一颗二叉树是否是平衡二叉树 6.1第一种思路 6.2第二种思路 7.二叉树的构建及…

语音群呼之语音导航的应用

在数字化时代&#xff0c;语音群呼技术已成为企业、组织和个人高效沟通的重要工具。语音群呼不仅能够快速地将信息传递给目标群体&#xff0c;而且通过语音导航功能&#xff0c;还能确保信息传达的准确性和用户体验的优质性。本文将深入探讨语音群呼的语音导航功能&#xff0c;…

HTML:认识HTML与基本语法的学习

前言 HTML&#xff08;超文本标记语言&#xff09;是用于创建网页的标记语言&#xff0c;由一系列标签组成&#xff0c;定义网页中的元素。由蒂姆伯纳斯 - 李于1990年代初发明&#xff0c;最初用于科研机构间共享文档&#xff0c;迅速演变为Web开发基础。无论是电商、博客、新…

一条sql的执行流程

文章地址 https://blog.csdn.net/qq_43618881/article/details/118657040 连接器 请求先走到连接器&#xff0c;与客户端建立连接、获取权限、维持和管理连接 mysql缓存池 如果要查找的数据直接在mysql缓存池里面就直接返回数据 分析器 请求已经建立了连接&#xff0c;现在…

串联式固定测斜仪无需钢丝绳、安装方便、可回收利用边坡基坑矿山地灾常用

一、固定式测斜仪的简介 固定测斜仪是一种用于长期自动监测各种结构物的深层水平位移的设备&#xff0c;获取土体内部的位移变化趋势&#xff0c;监测数据上传至安锐测控云平台&#xff0c;用户即可实时查看结构深层水平位移数据&#xff0c;实时预警&#xff0c;保障结构的安全…

代码随想录算法训练营第四十八 | ● 121. 买卖股票的最佳时机 ● 122.买卖股票的最佳时机II

121. 买卖股票的最佳时机 买卖股票的最佳时机 视频讲解&#xff1a;https://www.bilibili.com/video/BV1Xe4y1u77q https://programmercarl.com/0121.%E4%B9%B0%E5%8D%96%E8%82%A1%E7%A5%A8%E7%9A%84%E6%9C%80%E4%BD%B3%E6%97%B6%E6%9C%BA.html class Solution { public:int ma…

自友科技破解走班教育排课难题

新高考后&#xff0c;校园教务都面临着晋级&#xff0c;其中走班教育的分班排课是个巨大的挑战。 所以在分班排课的时候要清楚一下几个问题 一是&#xff1a;清楚的核算学生的选考科目。学生选科提交后做好并承认&#xff0c;最好是在分班后不要改或很少的一部分人改动。 二是…

世净超声波清洗机怎么样?美的、希亦、世净超声波清洗机谁更值得买?

在日常生活和专业领域中&#xff0c;清洁工作往往是既重要又烦琐的任务。特别是对于那些难以手工得尤为重要。关键是现在超声波清洗机已经不是从前的超声波清洗机了&#xff0c;不是只在工业领域上清洗一些重大零件了&#xff0c;已经逐渐开始能够清洗日常物品&#xff0c;像眼…

重庆工商大学社会工作专业试题及答案,分享几个实用搜题和学习工具 #媒体#学习方法#知识分享

搜题软件一般都是通过识别题目内容搜索出问题的答案&#xff0c;当识别内容不正确或搜索不到答案时&#xff0c;又得重新到其他软件进行重复的操作&#xff0c;很是麻烦。所以我们可以使用专业的识别工具&#xff0c;对题目内容进行识别&#xff0c;然后把提取出来的内容单独保…

【MySQL数据库】my.ini文件参数中文注释

&#x1f60e; 作者介绍&#xff1a;我是程序员洲洲&#xff0c;一个热爱写作的非著名程序员。CSDN全栈优质领域创作者、华为云博客社区云享专家、阿里云博客社区专家博主。 &#x1f913; 同时欢迎大家关注其他专栏&#xff0c;我将分享Web前后端开发、人工智能、机器学习、深…

Qsemaphore

Qsemaphore 实现 给while循环阻塞延时 基本思路就是&#xff1a; whlie循环里面 通过m&#xff3f;bthreadFlag&m_bStatus这两个标志位&#xff0c;判断是否进入while循环&#xff0c;再根据40行的acquire&#xff08;&#xff09;来阻塞循环&#xff0c;因为定时器的槽函数…

VCS基本仿真

这里记录三种仿真方式&#xff1a; 第一种是将verilog文件一个一个敲在终端上进行仿真&#xff1b; 第二种是将多个verilog文件的文件路径整理在一个文件中&#xff0c;然后进行仿真&#xff1b; 第三种是利用makefile文件进行仿真&#xff1b; 以8位加法器为例&#xff1a; …

13、SpringBoot 源码分析 - 自动配置深度分析六

SpringBoot 源码分析 - 自动配置深度分析六 refresh和自动配置大致流程AutoConfigurationImportSelector的fireAutoConfigurationImportEvents通知自动配置导入事件AutoConfigurationGroup的selectImports封装成Entry返回MyAutoConfiguration自动配置类创建META-INF文件夹和文件…

js解析成语法树以及还原

const {parse} require("babel/parser"); const traverse require("babel/traverse").default; const generator require("babel/generator").default;// 1.定义要处理的代码 const jscode function square(n) {return n * n; };// 2.使用ba…

c++ EECS280

Introduction Euchre (pronounced “YOO-kur”) is a card game popular in Michigan. The learning goals of this project include Abstract Data Types in C, Derived Classes, Inheritance, and Polymorphism. You’ll gain practice with C-style Object Oriented Progr…

104、二叉树的最大深度

给定一个二叉树 root &#xff0c;返回其最大深度。 二叉树的 最大深度 是指从根节点到最远叶子节点的最长路径上的节点数。 题解&#xff1a;所谓深度&#xff0c;就是树中某节点距离根节点的距离&#xff0c;如图中根节点3的深度为1&#xff0c;那节点7的深度为3&#x…

人类语言处理nlp部分笔记——二、BERT和它的家族-介绍和微调

参考自李宏毅课程-人类语言处理 二、BERT和它的家族-介绍和微调 1. What is pre-train model 这里所说的pre-train model是输入一串tokens&#xff0c;能够输出一串vectors&#xff0c;且每个vector可以表示对应的语义的模型&#xff0c;这些vectors也被称作为embeddings。以…

NXdfefefef

prototype&#xff1a;原型 CORS(Cross-Origin Resource Sharing):跨资源共享 Interceptor&#xff1a;拦截器 BOM&#xff1a;Browser Object Module(浏览器对象模型) Ajax(Asynchronous Javascript And XML)&#xff1a;异步的JavaScript和XML&#xff0c;Ajax其实就是浏览器…

apifox 生成签名

目录 前言准备编写签名脚本签名说明捋清思路编码获取签名所需的参数生成签名将签名放到合适的位置完整代码 在apifox中配置脚本新增公共脚本引用公共脚本添加环境变量 参考 前言 略 准备 查看apifox提供的最佳实践文章&#xff1a;接口签名如何处理 编写签名脚本 签名说明…

NineData蔡冬者参与编写墨天轮《2023年中国数据库行业年度分析报告》正式发布!

为明晰发展脉络&#xff0c;把握未来趋势&#xff0c;墨天轮于5月29日正式发布 《2023年中国数据库年度行业分析报告》。该报告由墨天轮联合业界专家学者共同编写&#xff0c;共330页&#xff0c;旨在梳理和洞察中国数据库行业的发展趋势、技术创新、市场动态以及面临的挑战&am…