Bootstrap 三列布局堆叠问题

Posted 2023-03-06

【中文标题】Bootstrap 三列布局堆叠问题

【英文标题】：Bootstrap Three Column Layout Stacking Issue

【发布时间】：2012-10-02 01:01:42

【问题描述】：

我在 Bootstrap 中使用 3 列布局，右侧有导航、内容和小部件，但希望在屏幕处于移动视图时布局如下堆叠；导航小部件，然后是内容，请告知。

查看图片以了解所需的桌面和移动布局顺序：

【问题讨论】：

请提供更多信息，并至少包含您想要的布局图像。

【参考方案1】：

按照移动设备所需的顺序放置块。然后把“widget”拉到右边：

<div class="container">
    <div class="row">
        <div class="span3 custom-nav"></div>
        <div class="span3 custom-widget pull-right"></div>
        <div class="span6 custom-content"></div>
    </div>
</div>​

在移动设备上，重置浮动：

@media (max-width: 767px) 
    [class*="span"].pull-right 
        float: none;
    

还有一些事情：

我在这里使用 custom 前缀，以免遇到 Bootstrap 预定义的 .nav 和 .content 类。 查看它在 the fiddle 上的工作原理。 检查the related question我已经回答了。 欢迎使用 ***。