Bootstrap 3 stickix

Question

我一直在玩preview of Bootstrap 3，并且遇到了“附加插件”的问题，它允许固定位置浮动条。

请找一个小提琴here显示我的烦恼。基本上，右侧按钮不会浮动，但是当应用position: fixed时，从网格系统继承的宽度和偏移样式似乎消失。

这是我的代码：

<div class='container'> 
    <div class='row'> 
     <div class='col-span-8'> 
      <legend>Lorem</legend> 
      <div>[Large amounts of text]</div> 
     </div> 
     <div class='col-span-4 well' data-spy='affix' data-offset-top='50'> 
      <div class='btn btn-large btn-danger col-span-12'>This is fixed</div> 
     </div> 
    </div> 
</div> 

我在做什么错？ （我知道Bootstrap 3仍在积极发展，但我希望有人在这里有一些见解。）

Answer 1

data-offset-top='50'增加了类affix-top。这个类在bootstrap.css中没有定义。滚动页面后，类affix替换类affix-top。 affix定义固定的位置。这会导致您贴上的div不同的显示。

也许更改您的代码到下面显示的工作更符合预期。注意在这种情况下粘贴的div不显示在小屏幕上？

<div class='container'> 
    <div class='row'> 
     <div class='col-span-8'> 
      <legend>Lorem</legend> 
      <div>[Large amounts of text]</div> 
     </div> 
     <div class='col-span-4'> 
      <div class="well col-span-4" data-spy='affix'> 
      <div class='btn btn-large btn-danger col-span-12'>This is fixed</div> 
      </div> 
     </div> 
    </div> 
</div>