Question

对于移动设备，我希望将div NAV移到最顶层。

桌面：

内容| TEASER
................. | NAV

移动：

NAV
内容
TEASER

我已经颠倒了布局，即我将其设置为应该用于移动设备的方式（低于992px）并使用推/拉类将NAV div推到桌面视口的右下角。不幸的是到目前为止还没有完全奏效。

非常感谢任何帮助。

<div class="container">
    <div class="row">
        <div class="col-md-4 col-md-push-8"> NAVI </div>    
        <div class="col-md-8 col-md-pull-4 left" style="padding-bottom: 200px"> CONTENT </div>
            <div class="col-md-4 col-md-push-8"> TEASER </div>  
    </div>

http://jsfiddle.net/aws9pv88/1/

Answer 1

我找到了解决方案。基本上HTML标记已经是正确的。我们需要做的就是将Nav Layer置于绝对位置，给它左边和左边距，以及定义宽度，并给Teaser div一个边距底部。

见这里：http://jsfiddle.net/aws9pv88/9/

<div class="container">
    <div class="row">
        <div class="col-md-4 col-md-push-8 nav"> NAVI </div>    
        <div class="col-md-8 col-md-pull-4" style="padding-bottom: 200px"> CONTENT </div>
            <div class="col-md-4 col-md-push-8 teaser"> TEASER </div>
    <div style="clear:left"></div>

    </div>

这是一个由bootsrap +绝对定位组成的解决方案。但是，如果somone找到一个只有bootstrap的解决方案，请随时在此处发布。

如何在colspan Bootstrap布局中将下部div移动到顶部？

1 个答案: