在移动视图中右侧的jumbotron中的白色空间

Question

我发现了很多这方面的内容，但没有什么能帮助我找出问题所在。这是有问题的空白区域的样子：

你能告诉我，这个空白区来自哪里吗？

我知道问题部分是jumbotron之后的部分。当我删除它时，空白区域消失了。你能告诉我，如果我在定位/间距方面做错了什么吗？

import numpy as np
import pandas as pd
import matplotlib.pyplot as plt
# create dummy pandas dataframes
pd1 = pd.DataFrame({'a':np.random.random(22),'b':np.random.random(22),
                    'c':np.random.random(22)})
pd2 = pd.DataFrame({'J':np.random.random(22),'K':np.random.random(22),
                    'P':np.random.random(22)})
#create subplot figure with having two side by side plots
fig, axes = plt.subplots(nrows=3,ncols=2,figsize=(12,6))
# plot first pandas frame in subplot style
pd1.plot(ax = axes[:,0],subplots=True) 
# plot second pandas frame in subplot style
pd2.plot(ax = axes[:,1],subplots=True)

plt.show()

Answer 1

不要调整.row上的边距或最大宽度。 .row有negative margins for a reason。

Answer 2

Bootstrap行和列旨在协同工作。如果你用自定义css更改其中一个部分，你几乎肯定会遇到类似这种情况的问题。

所以，如果你添加这样的东西：

.row {
    max-width: 1140px;
    margin: 0 auto;
}

您正在删除需要存在的负边距。这会产生您所看到的空白区域。

因此，不应该使用不必要的自定义css，而应始终使用本机Bootstrap 4类来实现布局中所需的内容，因为Bootstrap类允许您在不触及CSS的情况下执行几乎所有需要的操作。

这是一篇解释Bootstrap网格如何在幕后工作的文章：

http://www.helloerik.com/the-subtle-magic-behind-why-the-bootstrap-3-grid-works

注意：即使该文章讨论的是Bootstrap 3，所描述的原则也适用于Bootstrap 4网格。