我想在bootstrap中删除跨距之间的边距。
一个想法就是用零边距和填充覆盖css属性。 以下是一个示例:http://jsfiddle.net/kKEpY/3/
没有例外,左列浮动到右侧,它可以工作,但我更喜欢直接引导解决方案。那么bootstrap是否提供了一个清除列边距(span-fluid)的属性?
此致
答案 0 :(得分:15)
更新:下面的解决方案是指旧版本(< 2.1):自v2.1起,流体网格将根据正常网格维度自动计算 - 请参阅variables.less on github
要获得相同的结果,请将@gridGutterWidth
设置为0
并根据需要设置@gridColumnWidth
和@gridColumns
。
There,设置
@fluidGridColumnWidth
至8.333333333%
和@fluidGridGutterWidth
至0%
您可以获得that (jsfiddle)。
警告:生成器似乎根据您的变量和默认值(我在jsfiddle上删除了)来制定规则。
答案 1 :(得分:5)
我遇到了与你完全相同的问题,所以这是我在最新的Bootstrap 2.3.1版本上的完成方式:
首先,你需要在父级div中添加一个“无空格”类,其类似于“行”,如下所示:
<div class="row-fluid no-space">
<div class="span3">...</div>
<div class="span3">...</div>
<div class="span3">...</div>
<div class="span3">...</div>
</div>
然后根据您想要在该行中的元素数修改您的CSS,如下所示:
.no-space [class*="span"]{
margin-left: 0 !important;
width: 25% !important; // This is for 4 elements ONLY in the row
}
宽度的数学是:
100 / number of elements in the row = width.
在我的情况下,它是4个元素,所以它是:
100 / 4 = 25%;
如果它是3个元素,那就是:
100 / 3 = 33.3333333333%;
如果项目中有多个案例存在此问题,您可能需要为css规则添加唯一ID或类,以免影响所有这些。
就是这样。无需重新下载引导程序并处理源文件
PS:此方法也适用于响应式设计;)
答案 2 :(得分:3)
以上答案确实很有帮助,但我的情况有点不同。
我在html中有 span4 和 span8 div,html代码是这样的:
<div class="row">
<div class="span4">Content of span4</div>
<div class="span8">Content of span8</div>
</div>
为了做到这一点,我不仅应该将 margin-left 重写为0,还必须自定义span4和span8的宽度。所以这里是适用于我的代码:
.no-space [class*="span"]{
margin-left: 0 !important;
&.span8{
width: 75%;
}
&.span4{
width: 25%;
}
}
感谢您的灵感!
答案 3 :(得分:1)
我想在我的HTML中使用带有边距和跨度的span而没有边距。使用较少时,这很容易。只需创建自己较少的文件,将其命名为“no-margin-span.less”,并将其包含在较少的代码中。之后,您可以在html文件中使用“no-margin-span5”而不是“span5”。这与例如“no-margin-offset5”和“offset5”相同。 “no-margin-span.less”文件应该包含以下代码:
#grid {
.fluid (@fluidGridColumnWidth, @fluidGridGutterWidth) {
.no-margin-spanX (@index) when (@index > 0) {
(~".no-margin-span@{index}") { .no-margin-span(@index); }
(~'.no-margin-span@{index}:first-child') { .no-margin-spanFirstChild(@index); }
.no-margin-spanX(@index - 1);
}
.no-margin-spanX (0) {}
.no-margin-offsetX (@index) when (@index > 0) {
(~'.no-margin-offset@{index}') { .no-margin-offset(@index); }
.no-margin-offsetX(@index - 1);
}
.no-margin-offsetX (0) {}
.no-margin-offset (@columns) {
margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) + (@fluidGridGutterWidth);
*margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%) + @fluidGridGutterWidth - (.5 / @gridRowWidth * 100 * 1%);
}
.no-margin-span (@columns) {
width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) + @fluidGridGutterWidth;
*width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%) + (@fluidGridGutterWidth - (.5 / @gridRowWidth * 100 * 1%));
}
.no-margin-spanFirstChild (@columns) {
width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1));
*width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%);
}
.row-fluid {
[class*="no-margin-span"] {
.input-block-level();
float: left;
margin-left: 0;
}
// generate .no-margin-spanX and .no-margin-offsetX
.no-margin-spanX (@gridColumns);
.no-margin-offsetX (@gridColumns);
}
}
}
编辑 - 要使此代码响应,请将以下代码添加到“no-margin-span.less”文件中:
@media (max-width: 767px) {
// Make all grid-sized elements block level again
[class*="no-margin-span"],
.uneditable-input[class*="no-margin-span"], // Makes uneditable inputs full-width when using grid sizing
.row-fluid [class*="no-margin-span"],
[class*="no-margin-span"]:first-child,
.uneditable-input[class*="no-margin-span"]:first-child, // Makes uneditable inputs full-width when using grid sizing
.row-fluid [class*="no-margin-span"]:first-child {
float: none;
display: block;
width: 100%;
margin-left: 0;
.box-sizing(border-box);
}
.no-margin-span12,
.row-fluid .no-margin-span12 {
width: 100%;
.box-sizing(border-box);
}
.row-fluid [class*="offset"]:first-child {
margin-left: 0;
}
// FORM FIELDS
// -----------
// Make no-margin-span* classes full width
.input-large,
.input-xlarge,
.input-xxlarge,
input[class*="no-margin-span"],
select[class*="no-margin-span"],
textarea[class*="no-margin-span"],
.uneditable-input {
.input-block-level();
}
// But don't let it screw up prepend/append inputs
.input-prepend input,
.input-append input,
.input-prepend input[class*="no-margin-span"],
.input-append input[class*="no-margin-span"] {
display: inline-block; // redeclare so they don't wrap to new lines
width: auto;
}
.controls-row [class*="no-margin-span"] + [class*="no-margin-span"] {
margin-left: 0;
}
}