html - twitter bootstrap 词缀调整 div 元素的大小

Question

我正在使用 twitter bootstrap，下面是我的部分代码。每当向下滚动后应用词缀时，整个 div 都会调整大小。我做错了什么？

<div class="mythumb" data-spy="affix" data-offset-top="90">
                <img src={$profimg_src} style="width:100%;"  data-src="holder.js/300x200"/> 
                <div class="caption">
             <h5>{$firstname}{$middlename}{$lastname}</h5>
            </div>
            <div class="btn-group">
    <button class="btn" id="subscribe">Subscribe</button>
    <button class="btn dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
    <!-- dropdown menu links -->
    <li><a href="#">Subscribe To All posts</a></li>
    <li><a href="#">Subscribe To Ideas Only</a></li>
    <li><a href="#">Subscribe To Posts Only</a></li>
    </ul>
    </div>
            </div>

Answer 1

当使用词缀时，一旦你滚动了 90 像素(在本例中)，JS 就会将词缀类添加到它所监视的 div 中。

执行此操作时，它会使 div 脱离正常流，因此您通常必须为附加的 div 创建新样式。

这样的事情是一个开始:

.mythumb.affix{
top:50px;
margin: 0 auto;
width:940px;
height:200px;
}  

您可能还必须指定 z-index 和位置值。我不知道你当前的页面是什么样的，所以上面的 CSS 只是一个猜测。一旦您了解根本原因是附加的 div 已脱离正常流，您通常可以重新设计它以适合您的目的。

希望这对您有所帮助!