我试图在一个页面上获得3列,而在bootstrap
中它们之间没有任何间距这是我得到的:
这就是我想要的:
这是我目前正在使用的代码:
<div class="row">
<div class="span4 blue1">
<h1>span4 (1)</h1>
</div>
<div class="span4 blue2">
<h1>span4 (2)</h1>
</div>
<div class="span4 blue3">
<h1>span4 (3)</h1>
</div>
</div>
我真的不确定如何使用bootstrap实现我想要的东西 - 任何帮助赞赏
答案 0 :(得分:31)
您可以创建自己的类,删除span
网格元素之间的空格,如下所示:
<强> CSS 强>
.no-space [class*="span"] {
margin-left: 0;
}
然后你可以把它包含在容器.row
div:
<div class="row no-space">
<div class="span3 blue1">
<h1>span4 (1)</h1>
</div>
<div class="span3 blue2">
<h1>span4 (2)</h1>
</div>
<div class="span3 blue3">
<h1>span4 (3)</h1>
</div>
</div>
另请注意,.row
容器类会删除左侧的20px
以容纳网格元素,因此您可能必须将其删除,如下所示:
.no-space {
margin-left:0;
}
所以,到处看看哪些方法有效。
答案 1 :(得分:16)
完成课程,用add .no-space覆盖.row-fluid。
/*
* Bootstrap Grid System without space
*
* Overwrite Bootstrap grid system, removing margin
* Usage :
* Simple add no-space class with row-fluid
* <ul class="row-fluid no-space"> ... </ul>
*/
.row-fluid.no-space [class*="span"] {
margin-left: 0%;
*margin-left: -0.06944%;
}
.row-fluid.no-space [class*="span"]:first-child {
margin-left: 0;
}
.row-fluid.no-space .controls-row [class*="span"] + [class*="span"] {
margin-left: 0%;
}
.row-fluid.no-space .span12 {
width: 99.99999999999999%;
*width: 99.93055555555554%;
}
.row-fluid.no-space .span11 {
width: 91.66666666666666%;
*width: 91.59722222222221%;
}
.row-fluid.no-space .span10 {
width: 83.33333333333331%;
*width: 83.26388888888887%;
}
.row-fluid.no-space .span9 {
width: 74.99999999999999%;
*width: 74.93055555555554%;
}
.row-fluid.no-space .span8 {
width: 66.66666666666666%;
*width: 66.59722222222221%;
}
.row-fluid.no-space .span7 {
width: 58.33333333333333%;
*width: 58.263888888888886%;
}
.row-fluid.no-space .span6 {
width: 49.99999999999999%;
*width: 49.93055555555555%;
}
.row-fluid.no-space .span5 {
width: 41.66666666666666%;
*width: 41.597222222222214%;
}
.row-fluid.no-space .span4 {
width: 33.33333333333333%;
*width: 33.263888888888886%;
}
.row-fluid.no-space .span3 {
width: 24.999999999999996%;
*width: 24.930555555555554%;
}
.row-fluid.no-space .span2 {
width: 16.666666666666664%;
*width: 16.59722222222222%;
}
.row-fluid.no-space .span1 {
width: 8.333333333333332%;
*width: 8.263888888888888%;
}
.row-fluid.no-space .offset12 {
margin-left: 99.99999999999999%;
*margin-left: 99.8611111111111%;
}
.row-fluid.no-space .offset12:first-child {
margin-left: 99.99999999999999%;
*margin-left: 99.8611111111111%;
}
.row-fluid.no-space .offset11 {
margin-left: 91.66666666666666%;
*margin-left: 91.52777777777777%;
}
.row-fluid.no-space .offset11:first-child {
margin-left: 91.66666666666666%;
*margin-left: 91.52777777777777%;
}
.row-fluid.no-space .offset10 {
margin-left: 83.33333333333331%;
*margin-left: 83.19444444444443%;
}
.row-fluid.no-space .offset10:first-child {
margin-left: 83.33333333333331%;
*margin-left: 83.19444444444443%;
}
.row-fluid.no-space .offset9 {
margin-left: 74.99999999999999%;
*margin-left: 74.8611111111111%;
}
.row-fluid.no-space .offset9:first-child {
margin-left: 74.99999999999999%;
*margin-left: 74.8611111111111%;
}
.row-fluid.no-space .offset8 {
margin-left: 66.66666666666666%;
*margin-left: 66.52777777777777%;
}
.row-fluid.no-space .offset8:first-child {
margin-left: 66.66666666666666%;
*margin-left: 66.52777777777777%;
}
.row-fluid.no-space .offset7 {
margin-left: 58.33333333333333%;
*margin-left: 58.19444444444444%;
}
.row-fluid.no-space .offset7:first-child {
margin-left: 58.33333333333333%;
*margin-left: 58.19444444444444%;
}
.row-fluid.no-space .offset6 {
margin-left: 49.99999999999999%;
*margin-left: 49.86111111111111%;
}
.row-fluid.no-space .offset6:first-child {
margin-left: 49.99999999999999%;
*margin-left: 49.86111111111111%;
}
.row-fluid.no-space .offset5 {
margin-left: 41.66666666666666%;
*margin-left: 41.52777777777777%;
}
.row-fluid.no-space .offset5:first-child {
margin-left: 41.66666666666666%;
*margin-left: 41.52777777777777%;
}
.row-fluid.no-space .offset4 {
margin-left: 33.33333333333333%;
*margin-left: 33.19444444444444%;
}
.row-fluid.no-space .offset4:first-child {
margin-left: 33.33333333333333%;
*margin-left: 33.19444444444444%;
}
.row-fluid.no-space .offset3 {
margin-left: 24.999999999999996%;
*margin-left: 24.86111111111111%;
}
.row-fluid.no-space .offset3:first-child {
margin-left: 24.999999999999996%;
*margin-left: 24.86111111111111%;
}
.row-fluid.no-space .offset2 {
margin-left: 16.666666666666664%;
*margin-left: 16.52777777777778%;
}
.row-fluid.no-space .offset2:first-child {
margin-left: 16.666666666666664%;
*margin-left: 16.52777777777778%;
}
.row-fluid.no-space .offset1 {
margin-left: 8.333333333333332%;
*margin-left: 8.194444444444443%;
}
.row-fluid.no-space .offset1:first-child {
margin-left: 8.333333333333332%;
*margin-left: 8.194444444444443%;
}
<强>用法强>:
<ul class="media-list row-fluid no-space">
<li class="media span4">
<a class="pull-left" href="#">
<img class="media-object" data-src="holder.js/64x64">
</a>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
...
<!-- Nested media object -->
<div class="media">
...
</div>
</div>
</li>
<li class="media span4">
<a class="pull-left" href="#">
<img class="media-object" data-src="holder.js/64x64">
</a>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
...
<!-- Nested media object -->
<div class="media">
...
</div>
</div>
</li>
<li class="media span4">
<a class="pull-left" href="#">
<img class="media-object" data-src="holder.js/64x64">
</a>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
...
<!-- Nested media object -->
<div class="media">
...
</div>
</div>
</li>
</ul>
答案 2 :(得分:11)
我添加了offset0
这个确切的原因
.row-fluid .offset0 {
margin-left: 0
}
.row-fluid .span12.offset0 {
width: 99.99999999999999%;
*width: 99.93055555555554%;
}
.row-fluid .span11.offset0 {
width: 91.66666666666666%;
*width: 91.59722222222221%;
}
.row-fluid .span10.offset0 {
width: 83.33333333333331%;
*width: 83.26388888888887%;
}
.row-fluid .span9.offset0 {
width: 74.99999999999999%;
*width: 74.93055555555554%;
}
.row-fluid .span8.offset0 {
width: 66.66666666666666%;
*width: 66.59722222222221%;
}
.row-fluid .span7.offset0 {
width: 58.33333333333333%;
*width: 58.263888888888886%;
}
.row-fluid .span6.offset0 {
width: 49.99999999999999%;
*width: 49.93055555555555%;
}
.row-fluid .span5.offset0 {
width: 41.66666666666666%;
*width: 41.597222222222214%;
}
.row-fluid .span4.offset0 {
width: 33.33333333333333%;
*width: 33.263888888888886%;
}
.row-fluid .span3.offset0 {
width: 24.999999999999996%;
*width: 24.930555555555554%;
}
.row-fluid .span2.offset0 {
width: 16.666666666666664%;
*width: 16.59722222222222%;
}
.row-fluid .span1.offset0 {
width: 8.333333333333332%;
*width: 8.263888888888888%;
}
答案 3 :(得分:7)
您看到的列间距是网格系统的意图。
如果您希望列之间没有空格,则应直接设置这些元素的样式,而不是使用网格布局样式。
答案 4 :(得分:1)
如果使用less文件生成bootstrap css,请在variables.less文件中将@gridGutterWidth设置为0。否则,我认为更改css文件中的所有边距和填充是一件非常痛苦的事。
答案 5 :(得分:1)
如果在bootstrap中检查grid.less文件,则span * grid在一个简单的mixin中定义:
#grid > .core(@gridColumnWidth, @gridGutterWidth);
要构建没有空格的span *网格,可以使用less:
.my-nospace-grid {
#grid > .core(78px, 0px);
}
这将给出12 * 78px = 936px。
要选择您的值,请检查在variables.less中定义的默认大小:
// GRID
// --------------------------------------------------
// Default 940px grid
// -------------------------
@gridColumns: 12;
@gridColumnWidth: 60px;
@gridGutterWidth: 20px;
@gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
// 1200px min
@gridColumnWidth1200: 70px;
@gridGutterWidth1200: 30px;
@gridRowWidth1200: (@gridColumns * @gridColumnWidth1200) + (@gridGutterWidth1200 * (@gridColumns - 1));
// 768px-979px
@gridColumnWidth768: 42px;
@gridGutterWidth768: 20px;
@gridRowWidth768: (@gridColumns * @gridColumnWidth768) + (@gridGutterWidth768 * (@gridColumns - 1));
// Fluid grid
// -------------------------
@fluidGridColumnWidth: percentage(@gridColumnWidth/@gridRowWidth);
@fluidGridGutterWidth: percentage(@gridGutterWidth/@gridRowWidth);
// 1200px min
@fluidGridColumnWidth1200: percentage(@gridColumnWidth1200/@gridRowWidth1200);
@fluidGridGutterWidth1200: percentage(@gridGutterWidth1200/@gridRowWidth1200);
// 768px-979px
@fluidGridColumnWidth768: percentage(@gridColumnWidth768/@gridRowWidth768);
@fluidGridGutterWidth768: percentage(@gridGutterWidth768/@gridRowWidth768);
答案 6 :(得分:1)
我遇到了与你完全相同的问题,所以这是我在最新的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:此方法也适用于响应式设计;)
答案 7 :(得分:0)
我有两列的行。三,相应调整。然后我将它添加到我的.css中,然后加载bootstrap.css。
.no-space { /*apply to the row */
left-margin:0;
}
.row-fluid .span6 { /* overrides bootstrap.css to allow for no gutter */
/* width: 48.051948051948045%;
*width: 48.008658008658%; */
width: 50%;
*width: 50%;
}
html是:
<div class="row-fluid no-space"> <!-- r -->
<div class="span6">
<h4 class="titles">xxx</h4>
<img src="img/system/xxx.png">
</div>
<div class="span6">
<h4 class="titles">xxx</h4>
<img src="img/system/xxx.png">
</div>
</div><!--/r-->
现在,我有两个宽50%的柱子,两者之间没有排水沟。
答案 8 :(得分:0)
一般情况下,如果您仍想保留排水沟,但只想缩小或加宽排水沟而不在最右侧产生间隙,那么请确保相关的边距和宽度增加到100%,同时请记住边距不适用于最左边的跨度。所以对于你的3列布局,如果你想要一个0.5%的排水沟,那么选择3 * 33%+ 2 * 0.5%= 100%
.row-fluid .span4 {
width: 33%;
margin-left: 0.5%;
}
答案 9 :(得分:0)
<div>
<div class="container">
<div class="row">
<div class="span12">
<div class="row">
<div style="background:#000;" class="span6">testcont 1</div>
<div style="background:#000;" class="span6">testcont 2</div>
<div style="background:#000;" class="span6">testcont 3</div>
<div style="background:#000;" class="span6">testcont 4</div>
</div>
</div>
</div>
</div>
</div>
答案 10 :(得分:0)
以下是包含和不包含空格的等宽列的示例:http://codepen.io/ngeorgiev/pen/Lgxin/