twitter-bootstrap Bootstrap 3 词缀
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16263003/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 3 affix
提问by Randomblue
I have been playing with a preview of Bootstrap 3, and have had troubles with the "affix pluggin", which allows for fixed-position floating bars.
我一直在玩Bootstrap 3的预览版，并且在“附加插件”方面遇到了麻烦，它允许固定位置的浮动条。
Please find a fiddle hereshowing my troubles. Basically, the right-hand side button does float, but the width and offset styling inherited from the grid system seems to disappear when position: fixedis applied.
请在这里找到一个显示我的麻烦的小提琴。基本上，右侧按钮确实浮动，但是从网格系统继承的宽度和偏移样式在position: fixed应用时似乎消失了。
This is my code:
这是我的代码：
<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>
What am I doing wrong? (I know Bootstrap 3 is still under active development, but I hope someone with have some insight here.)
我究竟做错了什么？（我知道 Bootstrap 3 仍在积极开发中，但我希望有人在这里有一些见解。）
采纳答案by Bass Jobsen
data-offset-top='50'adds the class affix-top. This class has no definition in bootstrap.css. After scrolling the page the class affixreplace the class affix-top. affixdefines the position fixed. This caused different displays of your affixed div.
data-offset-top='50'添加类affix-top。这个类在 bootstrap.css 中没有定义。滚动页面后， classaffix替换 class affix-top。 affix定义固定位置。这导致您附加的 div 显示不同。
Maybe Changing your code to shown below works more as expected. NB in this case The affixed div isn't shown on small screens?!
也许将您的代码更改为如下所示的效果更符合预期。注意在这种情况下附加的 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>
