css-position – Bootstrap 3.0:固定列

前端之家收集整理的这篇文章主要介绍了css-position – Bootstrap 3.0:固定列前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
请在这里找到我的设计: http://jsfiddle.net/2JGQa/

我想修复左栏(包括testlab_fr,1er mail,…,10eme mail),就像我的标题一样,我怎么能这样做?

我看到了词缀,但我不知道如何使用它.

<div class="row">
<div class="col-sm-4">
  <div class="row">
    <ul class="list-group">

          <li class="list-group-item">
            <span class="badge">175</span>
            testlab_fr
          </li>    </ul>
  </div>
  <div class="row">

    <div class="list-group">


      <a href="http://localhost/mailBox/testlab_fr,26860-html" class="link_mail list-group-item active">
          <h4 class="list-group-item-heading">1er mail</h4>
          <p class="list-group-item-text">il y a 1 hours</p>
        </a>
      <a href="http://localhost/mailBox/testlab_fr,25877-html" class="link_mail list-group-item">
          <h4 class="list-group-item-heading">10ème mail</h4>
          <p class="list-group-item-text">il y a 2 heures</p>
        </a>    </div>
  </div>
</div><!-- /.col-sm-4 -->

解决方法

你会在这里找到关于词缀插件的文档: http://getbootstrap.com/javascript/#affix将你想要加载的元素包装在容器div中(b.e.with id =“subnav”).

通过Javascript或Via数据属性设置此容器的词缀.

javascript:$(‘#subnav’).affix();要么
通过数据属性:< div id =“subnav”data-spy =“affix”>

因为您不希望元素与固定导航栏重叠,您必须设置顶部偏移.顶部偏移量应至少为导航栏的高度.

如果您的设计有一个页脚,您还将设置底部偏移量.因为你不希望粘贴元素与页脚重叠.

Javascript:$(‘#subnav’).affix({offset:{top:150,bottom:150}});要么
通过数据属性:< div id =“subnav”data-spy =“affix”data-offset-top =“150”data-offset-bottom =“150”>

使用CSS将元素添加到文档顶部:.affix {position:fixed; top:0px;}

更多例子:https://github.com/twbs/bootstrap/pull/9902/files

猜你在找的CSS相关文章