滚动时引导词缀一直向左浮动答案

【问题标题】：bootstrap affix floats all the way to the left when scroll滚动时引导词缀一直向左浮动
【发布时间】：2012-12-19 11:19:40
【问题描述】：

我在一个容器中有一个 div，我希望它固定在屏幕的右侧。但是当用户开始滚动时，它只是一直向左移动。感谢您的帮助。

http://jsfiddle.net/kbLak/

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap.min.css" rel="stylesheet">

最近的事情：

        </div>
    </div>
</div>
<div class="explore_recentAlbums" data-spy="affix" data-offset-top="20">
    <div class="ex_recentBar">
        <div class="ex_titleDetails">
            <span>recent stuff: </span>
        </div>
    </div>
    <table>
        <tr>
            <td>

                    <div class="well well-small" style="margin-bottom: 1px;">
                        <span>Recent</span>
                    </div>

                    <span class="NoDataFound">No Photo.</span>


                    <div class="smallalbumcover">
                        <div class="mosaic-blocksmall mofade">
                            <div class="mosaic-overlay">
                                <div class="details">
                                    <p>
                                        <a href="#">xzxz</a>
                                    </p>
                                </div>
                            </div>
                            <div class="mosaic-backdrop">
                                <img src=""/>
                            </div>
                        </div>
                        <div class="clearfix">
                        </div>
                    </div>

                    <div style="margin-bottom: 1em; text-align: center; margin-top: 10px;">
                        <a style="text-decoration: none;" href="/pics"><span class="label label-info">View More</span></a>
                    </div>

            </td>
        </tr>
        <tr>
            <td>

                    <div class="well well-small" style="margin-bottom: 1px;">
                        <span>Recent Video Albums</span>
                    </div>

                    <span class="NoDataFound">No Video.</span>

                    <div class="smallalbumcover">
                        <div class="mosaic-blocksmall mofade">
                            <div class="mosaic-overlay">
                                <div class="details">
                                    <p>
                                        <a href="/">test</a>
                                    </p>
                                </div>
                            </div>
                            <div class="mosaic-backdrop">
                                <img src="#"/>
                            </div>
                        </div>
                        <div class="clearfix">
                        </div>
                    </div>

                    <div style="margin-bottom: 1em; text-align: center; margin-top: 10px;">
                        <a style="text-decoration: none;" href="/vids"><span class="label label-info">View More</span></a>
                    </div>

            </td>
        </tr>
        <tr>
            <td>

                    <div class="well well-small" style="margin-bottom: 1px;">
                        <span>Recent P</span>
                    </div>

                    <span class="NoDataFound">No.</span>

                    <div class="smallalbumcover">
                        <div class="mosaic-blocksmall mofade">
                            <div class="mosaic-overlay">
                                <div class="details">
                                    <p>
                                        <a href="/">test</a>
                                    </p>
                                </div>
                            </div>
                            <div class="mosaic-backdrop">
                                <img src=""/>
                            </div>
                        </div>
                        <div class="clearfix">
                        </div>
                    </div>

                    <div style="margin-bottom: 1em; text-align: center; margin-top: 10px;">
                        <a style="text-decoration: none;" href="/aio"><span class="label label-info">View More</span></a>
                    </div>


            </td>
        </tr>
    </table>
</div>

【问题讨论】：

当用户滚动或固定为“它根本不打算移动”时，您希望它保持固定并向下移动
是的，只要在滚动时保持固定在右侧即可。看看jsfiddle的例子

标签： html css twitter-bootstrap

【解决方案1】：

将此添加到您的 css 中，它将保持在右侧：

.explore_recentAlbums {
    right: 0;     
}

【讨论】：

谢谢。那行得通。所以我假设引导程序在将词缀类应用于 div 时有一个左 0，这就是它一直拉到屏幕左侧的原因。
当你滚动时它仍然会向右移动。如何让它保持在那个位置。
如果你想让它保持在顶部和右侧，你可以覆盖 .explore_recentAlbums 类上的 .affix ，将位置设置为静态。 .explore_recentAlbums.affix { 位置：静态； }