基础粘性元素忽略浮点类

Question

我在长格式的右上角有一个小切换按钮，可以切换表单是否可编辑。参考表单的顶部和底部元素，它很粘。当我滚动到页面顶部时，它工作正常，但是一旦我到达它变粘的点，它就会失去附加到它的float-right类的效果。这是代码：

<div class="columns small-8"><!-- First item of the form --></div>
<div class="columns small-4" data-sticky-container>
    <div class="switch round float-right" data-sticky data-top-anchor="userID:top" 
                data-btm-anchor="password:bottom" data-sticky-on="small">
        <input class="switch-input" id="switchEdit" name="switchEdit" type="checkbox">
        <p class="help-text align-center" id="editTitle">Edit</p>
    </div>
</div>

这是它之前和之后的样子（图片的右边缘是两幅图片中网格的右边缘）：

之前：

后：

问题：为什么会发生这种情况？我该如何解决？

P.S。我还没有完全弄清楚如何制作一个jsfiddle或codepen的东西，因为我对web的东西比较新（我通常在后端工作，但我的新工作需要前端的东西），所以很抱歉。

更新

我找到了this answer，因为我注意到.sticky.is-stuck类在css中设置了position: fixed。我尝试了他们说的话，但是这只是把我的小拨动一直放到窗口的右侧，而不是列的右侧。所以这不是一个选择。 ：/

Answer 1

我明白了！

我将容器的宽度设置为比实际元素的大小（64px）大30px，而不是将它浮动到小的4中以考虑所有不同尺寸的设备。因为基金会自动考虑填充）。我的容器代码最终看起来像这样：

<div class="columns" style="width: 94px;" data-sticky-container>

这样，＆＃34;列＆＃34;，可以这么说，粘性的东西正好是它里面元素的大小，而且它本身就是end的行。现在它适合所有屏幕尺寸，在正确的位置！