Bootstrap css：在小屏幕上对齐列

Question

编辑： 在实施下面接受的答案后，我有以下内容，这是我在实施任何推/拉策略之前最初拥有的。因此问题仍然存在。欢迎任何有助于在小屏幕上实现所需布局的建议。

----------------------------
|  Left Sidebar  |         |
------------------  Main   |
|                |         |
|                |         |
|                |         |
|                |         |
|                |         |
-----------------|---------|            
|  Right         |
------------------

我在流体容器（容器流体）中的一行中有 3 列。我整天都在尝试在屏幕尺寸变化时正确对齐它们，但无济于事。

1：右侧边栏

2：左侧边栏

3：主要

它在大屏幕上的样子：

------------------------------------------------
|   Left sidebar  |      Main      |  Right Sidebar |
------------------------------------------------

它在小屏幕上应该是什么样子：

----------------------------
|  Left Sidebar  |         |
------------------  Main   |
|  Right Sidebar |         |
----------------------------

现在的样子：

-----------------------------
|  Left          |  Main    |
|  Sidebar       ------------
|                |  Right   |
|                | sidebar  |
-----------------------------

我尝试了 col-sm-push/pull-x 和 col-xs-push/pull-x 的不同组合，但它们都没有产生所需的输出。我一直让列在大屏幕上相互重叠，而不是像预期的那样在小屏幕上很好地相互重叠。如何在小屏幕上实现正确的布局？

Answer 1

看看这个bootply。我使用了容器和面板，因为它们看起来更干净。阅读我使用的面板和网格here。阅读关于隐藏 div here:

<div class="container">
<div class="row">
    <div class="col-sm-8 col-md-4 hidden-xs">
        <div class="panel panel-default">
            <div class="panel-heading text-center">
                    <h3 class="panel-title">left</h3>

            </div>
            <div class="panel-body"></div>
        </div>
    </div>
    <div class="col-sm-4 col-md-4">
        <div class="panel panel-default">
            <div class="panel-heading text-center">
                    <h3 class="panel-title">main</h3>

            </div>
            <div class="panel-body"></div>
        </div>
    </div>
    <div class="col-sm-8 col-md-4 hidden-xs">
        <div class="panel panel-default">
            <div class="panel-heading text-center">
                    <h3 class="panel-title">right</h3>

            </div>
            <div class="panel-body"></div>
        </div>
    </div>
</div>

大预览

小预览

首先，您创建一个包含所有等宽列 (col-md-4) 的行，其中 col 表示列，md 表示何时以屏幕尺寸显示宽度（桌面（≥992px）），最大宽度为 12。接下来，您对不同尺寸的屏幕（sm ≥768px）执行相同操作，并为调整大小的面板选择宽度。为了以特定分辨率隐藏面板和 div，bootstrap 使用hidden-SCREENSIZE，因此我们在左右面板中添加了hidden-xs。