列大小调整问题中的Bootstrap列

So I've used Bootstrap columns before, but this project requires some heavy nesting, and I can't get it to work.

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

The layout requires .col-8 and .col-4 when on desktop, no matter what. The 8 column will support two more columns inside of it that are evenly sized, in which some information will go. I've attached an example below to give an idea. Once the view hits mobile size, the 4 column will disappear and the little columns inside will take up the whole screen.

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

So I have

所以我有

.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

This works for mobile. However, once you switch to tablet view, the two columns inside the .col-md-8 will not line up next to each other, and I don't really understand why. If anyone can help me figure out where I'm going wrong I'd appreciate it. I haven't touched any of the code for columns, so it's still basic Bootstrap.

这适用于移动设备。但是,一旦切换到平板电脑视图,.col-md-8中的两列不会相互排列,我真的不明白为什么。如果有人能帮助我找出我出错的地方,我会很感激。我没有触及任何列的代码,所以它仍然是基本的Bootstrap。

1 个解决方案

#1

I think I know what your issue is. I've read this article (check out the section on nesting.) before and it mentions you only need rows on your outside most columns not on inner/nested ones.

我想我知道你的问题是什么。我之前已经阅读过这篇文章(请查看有关嵌套的部分。)并且它提到您只需要在最外面的列上的行而不是内部/嵌套的行。

So change it like this and it should work.

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

.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