css - Bootstrap - 连续的 div 导致移位/跳转效果

Question

我有一个使用 twitter bootstrap 版本 2 开发的页面。我有一个分为 span8 和 span4 的行。Span8 有一些图像滑块（用 jquery 构建），而 span4 只有一些链接。页面加载时，首先显示跨度 4 中的所有链接，然后在加载图像时，将文本推到右侧。有没有办法防止这种移位/跳跃效应？

<div class="row-fluid">
    <div class="span8" id="imgDiv">
            <!-- Image slider goes here -->
        </div>
        <div class="span4" id="linksDiv">
            <ul>
               <li>link1</li>
               <li>link2</li>
               <li>link3</li>
            </ul>
        </div>
</div>

Answer 1

我设计了以下解决方案。这是一个 JSFiddle：http: //jsfiddle.net/sJq6y/

HTML

<div class="container">
    <div class="row-fluid">
        <div class="span8">
        <div class="imgDiv">
            <h1> Image slider goes here </h1> 
          </div> 
        </div>
        <div class="span4 linksDiv">
            <ul>
                <li><a href="#" class="btn btn-primary">Link One</a>
                </li>
                <li><a href="#" class="btn btn-danger">Link Two</a>
                </li>
                <li><a href="#" class="btn btn-info">Link Duo</a>
                </li>
            </ul>
        </div>
    </div>
</div>

CSS

.linksDiv ul {
    list-style:none;
    background-color:lightgrey;
    width:90px;
    height:90px;
    padding:10px;
}

.imgDiv h1 {
    text-align:center;
    color:tomato;
}

图片

Answer 2

可能是由于来自#imgDiv 和#linksDiv 的样式。

这个选项对你有用吗？

<div class="row-fluid">
<div class="span8">
  <div id="imgDiv">
        <!-- Image slider goes here -->  
  </div> <!-- end #imgDiv -->
    </div>
    <div class="span4">  
    <div id="linksDiv">
        <ul>
           <li>link1</li>
           <li>link2</li>
           <li>link3</li>
        </ul>  
    </div> <!-- end #linksDiv -->
    </div>
</div>  

祝你好运！