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

问题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值一样  参数详细你可以去菜鸟教程

              <p><a class="navy-link" href="#" role="button" data-toggle="modal" data-target="#clickmore">了解更多&raquo;</a></p>   //这是按钮

              <div class="modal fade" id="clickmore" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
              <div class="modal-dialog">
                <div class="modal-content">
                  <div class="modal-body">
                     <div class="showstep"><img src="../../../static/img/showg/showg1.gif" class="img-fluid" alt="dashboard" id="showStep"> </div>   
                  </div>
                  
                  <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                  </button>
                    
                  </div>
                </div>
              </div>
            </div> 

动态切换模态框中的内容

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