bootstrap如何去除自带的样式----导航栏中的菜单实现平滑的过渡到对应的菜单区域-------动态跟换模态框中的内容?

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

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

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

去除 carousel-inner这个类就行了

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

 菜单栏的代码  使用锚点href来连接  
<div class="collapse" > <ul class="nav navbar-nav navbar-right" > <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 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">了解更多&raquo;</a></p>   //这是按钮
 2 
 3               <div class="modal fade"  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" > </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      })