Question

我在bootstrap网站上有两个主要栏目。第一个是侧栏列，第二个是主要内容列。在桌面中它们显得很好但在移动设备中，侧边栏不在主内容区域下。

您可以看到此in one of the regular nodes of my site的实际示例，只需在移动模式下查看网站，向下浏览一下，您就会看到这一点。

请帮忙，

Answer 1

删除CSS更改并在主栏上使用col-lg-9，在侧栏上使用col-lg-3而不是当前代码。

<强>主要

<div id="primary" class="content-area col-lg-9">

<强>边栏

<aside id="sidebar" class="col-lg-3" role="complementary">

Answer 2

Bootstrap 3网格系统有四层：xs（手机），sm（平板电脑），md（桌面）和lg（大型桌面）。您几乎可以使用这些类的任意组合来创建更加动态和灵活的布局。

每层课程都会向上扩展，这意味着如果您计划为xs和sm设置相同的宽度，则只需指定xs。
  http://getbootstrap.com/examples/grid/
Container width  None (auto) 750px       970px       1170px  
Class prefix     .col-xs-    .col-sm-   .col-md-     .col-lg-
http://getbootstrap.com/css/

解决您的问题

在桌面版中，它们看起来不错，但在移动设备中，侧边栏不会进入主要内容区域。

您不应该修改引导网格，但可以使用现有的引导网格来实现您想要的效果。

例如

删除任何修改网格的CSS并更改此...

<div id="primary" class="content-area col-sm-8">
...
</div>
...
<aside id="sidebar" class="col-sm-4" role="complementary">
...
</aside>

要...

<div id="primary" class="content-area col-xs-12 col-sm-8">
...
</div>
...
<aside id="sidebar" class="col-xs-12 col-sm-4" role="complementary">
...
</aside>

这告诉浏览器

如果视口的宽度小于750px，则列应采用整个宽度，否则它们应并排显示

更改列宽

网格系统

Bootstrap包括一个响应式移动第一流体网格系统，随着设备或视口大小的增加，可以适当地扩展到12列。它包括用于简单布局选项的预定义类，以及用于生成更多语义布局的强大混合。

使用前缀col-xs- col-sm- col-md-和col-lg-定义列后，前缀后面的数字必须为每行加起来为12。< / p>

四个例子

如果你想要两个宽度相同的列，你可以使用

<div class="col-sm-6"></div>
<div class="col-sm-6"></div>
6 + 6 = 12

如果你想要三个宽度相同的列，你可以使用

<div class="col-sm-4"></div>
<div class="col-sm-4"></div>
<div class="col-sm-4"></div>
4 + 4 + 4 = 12

如果您想要两列，其中一列的大小是您使用的第一列的两倍

<div class="col-sm-4"></div>
<div class="col-sm-8"></div>
4 + 8 = 12

如果您想要两列，其中一列的大小是另一列的三倍，您可以使用

<div class="col-sm-3"></div>
<div class="col-sm-9"></div>
3 + 9 = 12

依旧等等

无法完全更改两个主要的Bootstrap列（col-sm-4＆amp; col-sm-8）

2 个答案:

解决您的问题

例如

更改列宽

网格系统

四个例子