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（查看嵌套部分。）之前，它提到你只需要在最外面的列而不是 inner/nested 列上的行。

所以像这样更改它应该可以工作。

.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

Bootstrap 列内列大小问题

Bootstrap columns inside columns sizing issues

html

css

twitter-bootstrap

pug