css - 在响应式设计中使用列的实用方法 - twitter bootstrap

Question

我正在使用 bootstrap v3.2 并且只是想知道，在使用 col-xs/col-sm ..etc 时使网站响应的最佳方法是什么

我正在通过 css 设置这些类，并试图让 div 容器适应不同屏幕尺寸的内容。

我目前正在做的是，在以最小宽度启动浏览器时将 col-xs 分配给 div，然后开始调整浏览器窗口的大小并根据浏览器选择其他类型(sm、md、lg)的列宽我当前正在查看的宽度(我还估计当前浏览器宽度的类别应该是什么)。这真的很乏味，尤其是在设计复杂结构时。

我使用的是 Chrome 浏览器。

Answer 1

我倾向于做的是将我的页面草绘成线框，以适应我希望在其上查看的各种不同屏幕尺寸。通过这种方式，您可以清楚地了解当视口(viewport)发生变化时应该如何布局。

您应该有策略地为每一列分配多个类，以便您可以定义它如何查找每个断点(480px (xs)、768px (sm)、992px (md)、1200px(lg)):

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

在上面的示例中，第一列在 480px 和 992px 之间是 2/12 宽度，对于大于 992px 的屏幕，它是 3/12 宽度。

您也可以只使用更大屏幕尺寸的列类，当屏幕小于指定尺寸时，它只会堆叠:

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

在该示例中，如果屏幕大于 992 像素，则列将分别为 3/12 和 9/12，但如果视口(viewport)小于它们，它们将垂直堆叠在一起。

您还可以使用推送和拉取类来处理文档流。举例来说，您有两列需要并排放置，但在移动设备上，右边的列需要放在最上面。按照通常的流程，您定义的第二列将位于底部，因此您可以执行以下操作:

<div class="container-fluid">
    <div class="row">
        <div class="col-md-3 col-md-push-9" id="first">
        </div>
        <div class="col-md-9 col-md-pull-3" id="second">
        </div>
    </div>
</div>

发生的事情是 3/12 列被 9 推，而 9/12 列被 3 拉，所以他们交换了位置。这意味着当它们并排时，它们将以相反的顺序但是当屏幕尺寸小于 992px (col-md) 时，第一个 div 将在顶部，第二个将在底部，返回到常规流程。

举例说明:

browser (> md)
+------------------------------------+------------+
| #second                            | #first     |
| col-md-9                           | col-md-3   |
| col-md-pull-3                      | ...-push-9 |
+------------------------------------+------------+

mobile (< md)
+-------------------------------------------------+
|                                                 |
| col-md-3 col-md-push-9 #first                   |
|                                                 |
+-------------------------------------------------+
|                                                 |
| col-md-9 col-md-pull-3 #second                  |
|                                                 |
+-------------------------------------------------+    

我希望这是有道理的，并且我正确地解释了你的问题。