Bootstrap删除行中的gutter-width和尊重宽度

时间:2014-01-02 23:19:15

标签: css twitter-bootstrap margin gutter

由于工作要求并面临以下挑战,我正在制作带有bootstrap 2的页面,请理解我正在学习它;) 我在命名空间#mainDiv

的命名空间下面有一个.bootstrapDiv

下面我有一个.row-fluid,其中有.span12,这是我的问题;

我需要能够将margin-right:0第一个和margin-left:0第二个放在一起,这两个div应该填充与其余行的总体布局相关的行。

我如何看到它们在左边是好的,但是在右边是缺少这个装订线宽度并且看起来并不好看,是否有任何特殊的类可以水平扩展行及其内容如果你取出水平边距中的元素?

你应该如何正常解决这个问题?

修改

这是我的小提琴:

http://jsfiddle.net/qdb74/

我指的是黑色空间

1 个答案:

答案 0 :(得分:1)

我通常通过创建自己的CSS或扩展Bootstrap来解决这样的问题。这是因为Bootstrap没有选项来修改.row-fluid的装订线。以下是如何扩展Bootstrap的示例:

.row-fluid [class*="span"].no-gutter {
    margin: 0;
}

.row-fluid .span6.no-gutter {
    width: 50%;
}

.row-fluid .span5.no-gutter {
    width: 41.666666666666666%
}
...

你可以像这样装饰你的元素:

<div class="firstDiv span6 no-gutter"></div>

但是,如果你决定扩展Bootstrap并且出现了新版本的框架,那么这可能会破坏。如果这是一个问题,最好在没有排水沟的情况下创建自己的流体网格。该选项将要求您编写比此更多的CSS。