如何调整列之间的空间

Question

我正在尝试缩小此网页左侧部分和右侧部分之间的空间，它正在折叠，但我没有在样式表中找到它。

网页：http://Megamadz.com左边的差距太宽了：有没有想过图表和右边：平台......

欢迎任何建议！

Answer 1

bootstrap框架正在为您添加填充（在较大尺寸的屏幕上）。最简单的方法是在左右列（现在是col-lg-9和col-lg-3）中添加一些额外的类，然后设置这样的样式：

.left { padding-right: 0px }
.right { padding-left: 0px }

如果你无法控制html将类添加到元素中，你可以试试这个相当讨厌的css选择器：

.middle > .row > .col-lg-9 { padding-left: 0px }
.middle > .row > .col-lg-3 { padding-right: 0px }

或

.middle > .row > div:first-child { }
.middle > .row > div:last-child { }

但是如果你对html的结构进行任何其他更改，那么当然会非常脆弱，所以我不推荐它。 ：）

此外，您可能希望添加其他媒体查询，以便您要应用的样式仅对较大的屏幕有效，否则您将影响小屏幕上的响应式布局。

或者，您可以自定义整个引导程序主题以使较窄的装订线等，但这会影响网站上的所有内容http://getbootstrap.com/customize/

Answer 2

您需要覆盖BootStrap列的padding-right和padding-left属性。

Allan's answer为您提供了几种方法，但您也可以使用in-line styles更改这些特定元素，而不会影响您网站的其余部分。

左侧div的内嵌样式：

<div class="col-lg-9" style="padding-right: 5px;">
    <div class="mainSec">...</div>
    ...
</div>

正确div的内嵌样式：

<div class="col-lg-3" style="padding-left: 5px;">
    <div class="panel panel-success">...</div>
    ...
</div>

这些样式会有this result。

Answer 3

.container和.col-xx-xx都有填充和边距。当发生这种事情时，总是仔细检查父元素。