滚动时,bootstrap affix一直向左浮动

时间:2012-12-19 02:59:45

标签: html css twitter-bootstrap

我在容器中有一个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>

1 个答案:

答案 0 :(得分:16)

将此添加到您的CSS,它将保持在右侧:

.explore_recentAlbums {
    right: 0;     
}