列大小问题内的引导列

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