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>

祝你好运！

Bootstrap - 连续的Div会导致移位/跳跃效果

2 个答案: