Bootstrap 3 词缀

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>