列大小调整问题中的Bootstrap列

Question

所以我之前使用过Bootstrap列，但是这个项目需要一些重型嵌套，我无法让它工作。

在桌面上，无论如何，布局都需要.col-8和.col-4。 8列将支持其中两个大小均匀的列，其中一些信息将会出现。我在下面附上了一个例子来提出一个想法。一旦视图达到移动大小，4列将消失，内部的小列将占据整个屏幕。

所以我有

.container
  .row
    .col-md-8
      .row
        .col-xs-12.col-sm-6.col-md-4.col-lg-4
          | content
    .col-md-4
      .row
        .col-xs-12
          | content

这适用于移动设备。但是，一旦您切换到平板电脑视图，.col-md-8内的两列不会相互排列，我也不会理解为什么。如果有人能帮助我弄清楚我哪里出错了，我会很感激。我没有触及任何列的代码，所以它仍然是基本的Bootstrap。

Answer 1

我想我知道你的问题是什么。我之前已经阅读了this article（请查看有关嵌套的部分。）并且它提到您只需要在最外面的列上的行而不是内部/嵌套的行。

所以改变它，它应该工作。

.container
  .row
    .col-md-8
      .col-xs-12.col-sm-6.col-md-4.col-lg-4
        | content
    .col-md-4
      .col-xs-12
        | content