5

请在这里找到我的设计：http: //jsfiddle.net/2JGQa/

我想像我的标题一样修复左列（包括 testlab_fr、1er 邮件、...、10eme 邮件），我该怎么做？

我看到了词缀，但我不知道如何使用它。

<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 -->
4

1 回答 1

3

您将在此处找到 affix 插件的文档：http ://getbootstrap.com/javascript/#affix将您想要附加到容器 div 中的元素包装起来（使用 id="subnav"）。

通过 Javascript 或 Via 数据属性设置该容器的 affix。

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

于 2013-09-05T06:49:29.707 回答