修复内容左侧和右侧的间隙

Question

我正在使用bootstrap并尝试调整其中一个免费模板以满足管理员需求。现在，当窗口最大化时，#page-wrapper内的内容在两侧留下太多空间。我尝试使用不同的填充，边距大小，然后响应失败，水平滚动条出现。如何在不损失响应性的情况下减少此内容左侧和右侧的空间。

请在

下方找到屏幕截图

小提琴可用here

模板最初工作正常，但当我将其包装在bootstrap container div内时，我遇到了这个问题。

Answer 1

将容器更改为容器流体

Answer 2

您正在使用.container类作为包装器。它具有特定的宽度调整，这取决于屏幕分辨率。您应该使用.container-fluid类进行流畅布局。否则你必须编辑bootstrap css文件。请参阅css代码：

.container{margin-right:auto;margin-left:auto;padding-left:15px;padding-right:15px}
@media (min-width:768px){.container{width:750px}}
@media (min-width:992px){.container{width:970px}}
@media (min-width:1200px){.container{width:1170px}}
.container-fluid{margin-right:auto;margin-left:auto;padding-left:15px;padding-right:15px}