Css 在响应式设计中使用专栏的实用方法-twitter引导

我正在使用BootstrapV3.2，我只是想知道，在使用col-xs/col-sm..等时，让站点具有响应性的最佳方法是什么

我正在从css设置这些类，并试图使div容器以不同的屏幕大小容纳其内容

我目前正在做的是，在以最小宽度启动浏览器时，将列X指定给一个div，然后开始更宽地调整浏览器窗口的大小，并根据我当前查看的浏览器宽度选择其他类型（sm、md、lg）列宽（我还估计了当前浏览器宽度的类别）。这真的很乏味，特别是在设计复杂结构时

---

我用的是Chrome浏览器

我不确定我是否正确理解了你的问题。 您是否手动从javasript中选择了正确的类

因为如果你这样做了，你就不必在XOLXS，col-md，col-lg之间选择beetween。。。班级。。。 您只需设置所有这些，CSS媒体查询将根据屏幕宽度选择正确的类

例：

---

.col-xs

和

.col-sm

是使网站具有响应性的好方法

在智能手机和小型设备上，不要忘记使用

.hidden xs

和

.hidden sm

类。有些信息在小型设备上没有用处

我在lg桌面上写下了我的页面。完成后，我在第二个屏幕上打开3个窗口（

xs

、

sm

、和

md

）。我重新加载它们并修改代码，直到所有视图都正常

对不起，我的语言不流利

---

下面是一个响应式phpbb样式的示例：

我倾向于将我的页面绘制为线框，以显示我希望在其上查看的各种不同屏幕尺寸。这样，您就可以清楚地了解视口更改时应如何布局

您应该策略性地为每个列分配多个类，以便定义它如何查找每个断点（480px（xs）、768px（sm）、992px（md）、1200px（lg））：

在上面的示例中，第一列的宽度为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>

在该示例中，如果屏幕大于992px，则列将分别为3/12和9/12，但如果视口小于这些列，则它们将垂直堆叠在彼此的顶部

您还可以使用push和pull类来处理文档流。例如，假设您有两个列需要并排，但在移动设备上，右侧的一列需要位于顶部。按照一般流程，您定义的第二列将在底部结束，因此您可以执行以下操作：

<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将位于顶部，第二个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                  |
|                                                 |
+-------------------------------------------------+    

browser（>md）
+------------------------------------+------------+
|#第二|#第一|
|col-md-9 | col-md-3|
|col-md-pull-3 |…-push-9|
+------------------------------------+------------+
移动（

---

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

这是一个非常广泛的问题。你能把它缩小到一个特定的用例/场景吗？我正在从CSS设置它，并试图使当前的div在不同的屏幕大小上适应div的内容。在xs屏幕大小上呈现与@AlexandreT sure相同的视图。。。但我怀疑他只需要最小的配置…@Miam84，不是真的。如果只声明一个xs列，它将应用于所有设备列（sm、md、lg）。好的，我知道问题出在哪里了。。。这是一个坏例子。。。我应该为每个尺寸设置不同的值。其目的是显示不同的媒体查询规则，以使不同大小的媒体不呈现相同的样式。。。我的错。

<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>

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                  |
|                                                 |
+-------------------------------------------------+