如何修改bootstrap导航栏菜单，实现平滑过渡至对应菜单区域而不影响自带的样式？

本文共计861个文字，预计阅读时间需要4分钟。

问题1：如何去除Bootstrap中CSS中自带的overflow: hidden样式：

今天发现Bootstrap中的轮播图上方的附带图+片不能显示出来，图片始终被隐藏了一部分。图片起始时有一部分的宽度被隐藏了，后被隐藏了。后来通过控制台发现是有ove样式造成的。

问题1：如何去除bootstap中css中自带的overflow：hidden这个样式

今天遇见在bootstap中轮播图上的 附带图 片不能够显示出来，图片始终有一部分的高度 被隐藏了

后来通过控制台看见是有overflow：hidden这个样式 是由<div class="carousel-inner">这个类造成的 如何解决

去除carousel-inner这个类就行了

功能2：导航栏中的菜单实现平滑的过渡到对应的菜单区域

菜单栏的代码 使用锚点href来连接
<div class="collapse" id="navbar">
<ul class="nav navbar-nav navbar-right" id="menubox">
<li><a class="nav-link page-scroll" href="#page-top">111</a></li>
<li><a class="nav-link page-scroll" href="#features">222</a></li>
<li><a class="nav-link page-scroll" href="#contact">333</a></li>

</ul>
</div>

你要放置的类容区域 需要使用id 和 class并且对应的都是相同的 page-top

<section id="page-top" class="page-top">
你要写的内容区域

</section>

　　

$(function(){
$('.nav-link').click(function(){//.nav-link是导航栏中的菜单
//根据标签的href转换为id选择器，获取id元素所处的位置，并高度减50px（这里根据需要自由设置）
$('html,body').animate({scrollTop: ($($(this).attr('href')).offset().top -50 )},1000);
});

功能3：使用bootstrap 制作弹出层 动态跟换模态框中的内容

在按钮当中data-toggle="modal" data-target="#clickmore" 这两个属性是必须的

data-target="#clickmore"中的值必须和模态框中的的id值一样 参数详细你可以去菜鸟教程

1 <p><a class="navy-link" href="#" role="button" data-toggle="modal" data-target="#clickmore">了解更多»</a></p> //这是按钮
2
3 <div class="modal fade" id="clickmore" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
4 <div class="modal-dialog">
5 <div class="modal-content">
6 <div class="modal-body">
7 <div class="showstep"><img src="../../../static/img/showg/showg1.gif" class="img-fluid" alt="dashboard" id="showStep"> </div>
8 </div>
9
10 <div class="modal-footer">
11 <button type="button" class="btn btn-default" data-dismiss="modal">关闭
12 </button>
13
14 </div>
15 </div>
16 </div>
17 </div>

动态切换模态框中的内容

1 // 演示步骤的代码 $('#pic')
2 $(".navy-link").click(function(){
3 var indexg = $(".navy-link").index(this);
4 if(indexg==1){
5 $("#showStep").attr("src",'../../../static/img/showg/showg2.gif')
6 }else if(indexg==2){
7 $("#showStep").attr("src",'../../../static/img/showg/showg3.gif');
8 }else if(indexg==3){
9 $("#showStep").attr("src",'../../../static/img/showg/showg4.gif');
10 }
11

遇见问题，这是你成长的机会，如果你能够解决，这就是收获。

作者：​​晚来南风晚相识​​​

本文版权归作者所有，欢迎转载，未经作者同意须保留此段声明，在文章页面明显位置给出原文连接

如果文中有什么错误，欢迎指出。以免更多的人被误导。