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

当使用词缀时，一旦你滚动了90px（在这种情况下），JS会将它的类别添加到它所监视的div中。

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

这样的事情是一个开始：

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

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

希望这有帮助！

twitter bootstrap affix调整div元素的大小

1 个答案: