Bootstrap中断后删除同一行中列之间的空格

Question

On Bootstrap 3。

如果你运行下面的html和css，div正确渲染，没有768px以上的空格。一旦你到达那个断点，div就会叠加在一起，这很好。然而，这两个div之间出现了这个神秘的白色空间。如果您弹出开放式开发工具，则没有任何类型的边距或位置设置，并且通过媒体查询为第二个div设置负边距也无济于事。我对这个白色空间究竟造成了什么感到茫然。

几乎看起来第一个div粘在导航元件的顶部而第二个在断点处粘在底部，但这是一种预感，我不确定我是如何解决它的。 Html和CSS在下面。

nav {
    height: 100%;
}

.brand {
    background-color: rgba(192, 192, 192, 0.3);
}

.navlinks {
    background-color: rgba(59, 128, 173, 0.5);
    height: 69px;
}

.navlinks p {
    color: white;
    position: absolute;
    bottom: 0;
}

这就是CSS：

Container [pid=20975,containerID=container_1502190583079_0006_01_000002] is running beyond physical memory limits. Current usage: 1.0 GB of 1 GB physical memory used; 1.7 GB of 2.1 GB virtual memory used. Killing container.
Dump of the process-tree for container_1502190583079_0006_01_000002 :

Answer 1

实际上<h1>代码的边距延伸到col-sm-4 div之外。

使用Bootstrap处理它的一种方法是识别发生中断的点，并使用媒体查询删除h1的余量。 这样的事情。

@media (max-width: 720px) {
  .brand h1 {
    margin: 0px;
  }
}

[注意：我在这里使用.brand h1来引用h1，因为它只适用于特定的h1代码，而不适用于所有h1代码页。]

瞧：

请参阅JSFiddle。