无法完全更改两个主要 Bootstrap 列（col-sm-4 和 col-sm-8）

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

The Bootstrap 3 grid system has four tiers of classes: xs (phones), sm (tablets), md (desktops), and lg (larger desktops). You can use nearly any combination of these classes to create more dynamic and flexible layouts.

Each tier of classes scales up, meaning if you plan on setting the same widths for xs and sm, you only need to specify 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/

解决您的问题

In Desktop they appear fine but in Mobile the sidebar doesn't go under the main-content area.

你不应该修改 bootstrap 网格，但你可以使用现有的 bootstrap 网格来实现你想要的。

例如

删除任何修改网格的 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>

这告诉浏览器

If the viewport is less than 750px wide, the columns should take the entire width, else they should be displayed side by side

更改列宽

Grid system

Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.

当您使用前缀 col-xs- col-sm- col-md- 和 col-lg- 定义列时，每行前缀后面的数字加起来必须为 12 .

四个例子

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

<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 和 col-sm-8）

Can't change two main Bootstrap columns altogether (col-sm-4 & col-sm-8)

css

twitter-bootstrap

calculated-columns

解决您的问题

例如

更改列宽

Grid system

四个例子