Bootstrap超小窗口

Question

我一直在尝试使用Bootstraps将我的网站调整为超小窗口大小，但我没有为自己找到任何解决方案。

我希望在窗口太小时显示一列，否则保留左侧版本。此时，代码类似于：

<div class="container-fluid">
    <div class="row">
        <div class="col-md-3" id="divLeft">
        <div class="panel panel-success" id="divChart">
            <!-- Some progress bars -->
        </div>
    </div>
    <div class="col-xs-12-offset-6 col-sm-6" id="divMain">
        <h2>Observations</h2>
        <div class="list-group" id="observations">
            <!-- Some panels -->
    </div>
</div>

我该怎么办？我试图在我的div divLeft和divMain中添加多个类，但它不能正常工作。

先谢谢你们！ ：D

Answer 1

每行应始终最多添加12列。

查看一下Bootstrap Docs，它告诉您如何使用他们的网格系统：

http://getbootstrap.com/css/#grid

我建议您举例如下：

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-12 col-md-3"></div>
        <div class="col-xs-12 col-md-9"></div>
    </div>
</div>

以上情况应该导致两列在超小型设备上显示一个在另一个之上。