javascript - Bootstrap 3 附加

Question

我一直在玩 preview of Bootstrap 3 ，并且在使用“词缀插件”时遇到了麻烦，它允许固定位置的 float 条。

请找一个 fiddle here显示我的烦恼。基本上，右侧按钮确实 float ，但是当应用 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>