Bootstrap行：在较小的屏幕上对齐3列

Question

我在一个流体容器（容器 - 流体）中的一行中有3列。我一直试图在屏幕尺寸变化上正确对齐它们，因为没有成功地将它们对准较小的屏幕。

它在大屏幕上看起来是什么：

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

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

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

现在的样子：

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

这是bootply：http://www.bootply.com/XHv1LaZJrA。我想知道在给定代码结构的情况下如何在较小的屏幕上实现所需的布局。

Answer 1

我不能说这是问题的最佳答案，但这是一个锻炼。我在这里做的是创建2个独立的容器，一个可以在大型设备上看到并隐藏在较小的设备上，另一个可以在较小的设备上看到，但隐藏在较大的设备上。我是这样做的，因为差距来自left和right不共享同一列。

Bootply

<强>代码：

 <div class="container hidden-sm">
    <div class="row">
        <div class="col-sm-8 col-md-4">
            <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>
                  This is the body for main. Lonnnnnnn
                    "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed 
                    do eiusmod 
                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad 
                    minim veniam, 
                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex 
                    ea commodo consequat. 
                    Duis aute irure dolor in reprehenderit in voluptate velit 
                    esse cillum dolore eu fugiat nulla pariatur. 
                    Excepteur sint occaecat cupidatat non proident, 
                    sunt in culpa qui officia deserunt mollit anim id est laborum."


                </div>
                <div class="panel-body"></div>
            </div>
        </div>
        <div class="col-sm-8 col-md-4">
            <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>
</div>
<div class="container hidden-lg">
    <div class="row">
        <div class="col-sm-8 col-md-4">
            <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 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 class="col-sm-4 col-md-4">
            <div class="panel panel-default">
                <div class="panel-heading text-center">
                        <h3 class="panel-title">main</h3>
                  This is the body for main. Lonnnnnnn
                    "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed 
                    do eiusmod 
                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad 
                    minim veniam, 
                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex 
                    ea commodo consequat. 
                    Duis aute irure dolor in reprehenderit in voluptate velit 
                    esse cillum dolore eu fugiat nulla pariatur. 
                    Excepteur sint occaecat cupidatat non proident, 
                    sunt in culpa qui officia deserunt mollit anim id est laborum."


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

预览大

预览小