css - 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 文档，它告诉您如何使用他们的网格系统:

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>

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