Bootstrap 2列3平方布局不填充页面

Question

我在使引导程序布局填满整个页面时遇到了一些问题。这是我目前拥有的jsbin：http://jsbin.com/tibusakuci/edit?html,css,output

我无法将网格填满整个页面。我希望它看起来像这样（填满整个屏幕）：

在移动屏幕上看起来像这样：

当我拿出最低限度时，有没有人知道为什么我的代码会赢得整个屏幕？使用bootstrap。使用高度：100％也不起作用。

*目前这些方框只能填满屏幕的一半

谢谢！

Answer 1

更新：以下代码将解决您的装订线问题。但看起来你的主要问题是流体容器没有填满整个页面。

原因/解决方案：根据这个github问题 - Fluid Layout with 100% height #1671 - 没有＃34;开箱即用＆＃34;解。尝试在该问题线程中实现少数解决方案之一（使用jsfiddle代码）。

以前的答案（部分过时）

正在使用jsbin：http://jsbin.com/rilihit/1/edit?html,css,output

STEPS

1. 从margin-bottom和.row > div移除.sidebar-bottom声明。

2. 在自定义css文件中声明此css以删除默认的bootstrap列装订线。此代码具有响应性，适用于所有列大小

.no-gutter > [class*='col-'] { padding-right:0; padding-left:0; }

1. 最后，在您的HTML中，将no-gutter添加到row，就像这样。

这里是完整的HTML和CSS代码。我修改了你的jsbin代码并进行了测试。 （我创建了sidebar-bottom＆＃39; min-height = 160px;，以便2的min-height值加起来为min-height的{​​{1}}值。在桌面视图中排队。）

＆＃13;
＆＃13;
content
＆＃13;
.row > div {
  background-color: green;
}
.header,
.footer {
  background: blue;
}
.content {
  background: pink;
  min-height: 300px;
}
.sidebar-top {
  min-height: 140px;
  background: yellow;
}
.sidebar-bottom {
  min-height: 160px;
  background: lightblue;
}
.no-gutter > [class*='col-'] {
  padding-right: 0;
  padding-left: 0;
}
＆＃13;
＆＃13;
＆＃13;

相关参考资料/阅读：Bootstrap 3 Tips and Tricks You Still Might Not Know

Answer 2

从container-fluid和col-*中移除填充。您可以使用vh进行完全高度调整，并在较小的屏幕上相应调整此高度为33％。

.content {
  background: pink;
  min-height: 100vh;
}
.sidebar-top{
  min-height: 50vh;
  background: yellow;
}
.sidebar-bottom{
  min-height: 50vh;
  background: lightblue;
}

@media (max-width: 768px) {
    .content,
    .sidebar-top,
    .sidebar-bottom {
      min-height: 33vh;
    }
}

.row.no-gutter {
  margin-right:0;
  margin-left:0;
}
.row.no-gutter > [class*='col-'],
.container-fluid {
  padding-right:0;
  padding-left:0;
}

工作演示： http://www.codeply.com/go/r3Rdffxi7A

Answer 3

去除填充物和周围边缘，并消除负向左移和右移。