码迷,mamicode.com
首页 > 其他好文 > 详细

Bootstrap3中的affix的使用Demo

时间:2019-10-13 00:27:11      阅读:129      评论:0      收藏:0      [点我收藏+]

标签:col   tst   style   pos   nbsp   element   dem   tom   fun   

<div class="container">
    <div class="col-md-3">
        <ul class="list-group affixed-element-top js-affixed-element-top">
            <li class="list-group-item">hello</li>
            <li class="list-group-item">hello</li>
            <li class="list-group-item">hello</li>
            <li class="list-group-item">hello</li>
            <li class="list-group-item">hello</li>
        </ul>
    </div>
    <div class="col-md-6 js-content">
        <p>段落</p>
        <p>段落</p>
        <p>段落</p>
        <p>段落</p>
        <p>段落</p>
    </div>
    <div class="col-md-3">
        <ul class="list-group affixed-element-bottom js-affixed-element-bottom">
            <li class="list-group-item">hello</li>
            <li class="list-group-item">hello</li>
            <li class="list-group-item">hello</li>
            <li class="list-group-item">hello</li>
            <li class="list-group-item">hello</li>
        </ul>
    </div>
</div>

 

 

<script>
    // $(‘.collapse‘).collapse()
  $(function(){
     $(".js-affixed-element-top").affix({
        offset: {

        }
     });
     $(".js-affixed-element-bottom").affix({
      offset: {

      }
     });
  });
</script>

 

 

<style>
        .affixed-element-top.affix{
            top:10px
        }
        .affixed-element-top.affix-bottom{
            position: relative;
        }
        .affixed-element-bottom.affix{
            bottom:10px
        }
        .affixed-element-bottom.affix-bottom{
            position: relative;
        }

    </style>

 

Bootstrap3中的affix的使用Demo

标签:col   tst   style   pos   nbsp   element   dem   tom   fun   

原文地址:https://www.cnblogs.com/MarkJacobs/p/11664459.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!