Bootstrap 3.0：固定列答案

【问题标题】：Bootstrap 3.0 : Fixed columnBootstrap 3.0：固定列
【发布时间】：2013-09-04 05:37:50
【问题描述】：

我想像我的标题一样修复左列（包括 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 -->

【问题讨论】：

标签： css-position fixed twitter-bootstrap-3 css

【解决方案1】：

您可以在此处找到 affix 插件的文档：http://getbootstrap.com/javascript/#affix 将要附加的元素包装在容器 div 中（例如，使用 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;}

【讨论】：

它不起作用我试试这个：jsfiddle.net/2JGQa/5 但什么都没有......我想修复顶部和左侧，我该怎么做？
您的小提琴不包括 Bootstrap 的 javascript 插件，也缺少 jQuery，请参阅：jsfiddle.net/2JGQa/7
是的，非常感谢您的解决方案。但是我的设计很灵活，所以我使用这种方法 width:225px 所以这很糟糕。
固定元素的宽度将是视口的 100%。由于元素被包裹在 col-sm-4（视口的 25%）中，您也可以将侧边栏的宽度设置为 25%。 .affix{width:25%;}
我对@987654332@ 的评论是错误的。 col-sm-4 没有获得 25% 的视口，它获得了 .container 父级的 33%。也许 25% 的视口（你的词缀的宽度）适合这里。请参阅：stackoverflow.com/a/18966454/1596547 以获得更好的解决方案。