更改跨度类的默认 Twitter Bootstrap 边距 20px答案

【问题标题】：Change the default Twitter Bootstrap margin 20px for span classes更改跨度类的默认 Twitter Bootstrap 边距 20px
【发布时间】：2012-07-30 04:28:42
【问题描述】：

我用

<div id="windows">
    <div class="row-fluid">
        <div class="span4 mywindow">Text</div>
        <div class="span4 mywindow">Text</div>
        <div class="span4 mywindow">Text</div>
    </div>
</div>

在特殊宽度的 div #windows 内。

我想减少这三个块之间的默认 20px 间距。

这些css代码

#windows .span4
{
    margin-right:-10px;
}

在block之间设置适当的间距，但每个block保持相同的宽度，所以总宽度小于父div的100%（有右边的空格）。

我可以通过使用!important 更改块的宽度来修复它。所以修复是

#windows .span4
{
margin-right:-10px;
width:180px !important;
}

那么问题是：如果我必须如此努力地修复它，那么在我的窗口中使用 Twitter Bootstrap span4 类是否有意义？

我的意思是，修复 Twitter Bootstrap 跨度类的边距和宽度是一个好习惯，还是有一个更简单、更好的解决方案来修复块？附言Twitter Bootstrap 也用于页面上的其他目的（所以 span4 并不是我使用 Twitter Bootstrap 的唯一原因）。

【问题讨论】：

标签： css twitter-bootstrap html

【解决方案1】：

您正在尝试更改列之间的 gutter 宽度。最简单的方法是在下载之前自定义 BS 构建：

http://twitter.github.com/bootstrap/customize.html#variables

在此处更改 @gridGutterWidth 值（对于固定布局），然后下载您的构建。

【讨论】：

【解决方案2】：

这可能会帮助有同样问题的人在 Rails 应用程序中使用 bootstrap 作为 gem。

如果您将引导程序与 gem 'bootstrap-sass' 一起使用，您可以直接覆盖此默认值，如下所示：

.span{
  margin-left:0px;
}

这会覆盖 gem 给出的默认边距。

【讨论】：