25

我试图在一个页面上获得 3 列,在引导程序中它们之间没有任何间距

这是我得到的:

跨度失败

这就是我想要的:

跨度赢

这是我目前正在使用的代码:

<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>

我真的不确定如何使用引导程序来实现我想要的 - 任何帮助表示赞赏

4

11 回答 11

31

您可以创建自己的类来删除span网格元素之间的空间,如下所示:

CSS

.no-space [class*="span"] {
    margin-left: 0;
}

然后你可以将它包含在容器.rowdiv 中:

<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;
}

所以到处玩看看有什么用。

演示:http: //jsfiddle.net/G36uQ/

于 2012-05-23T12:40:22.243 回答
16

完整的类,用添加 .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>

Demo on Bootply

于 2013-05-24T11:47:18.870 回答
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%;
}
于 2013-04-21T17:08:14.593 回答
7

您看到的列间距是网格系统的意图。

如果您不希望列之间有空格,您应该直接设置这些元素的样式,而不是使用网格布局样式。

于 2012-05-23T11:19:53.960 回答
1

如果您在 bootstrap 中检查 grid.less 文件,则 span* 网格在一个简单的 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);
于 2013-05-27T14:06:14.477 回答
1

如果您使用较少的文件来生成引导 css,请在 variables.less 文件中将 @gridGutterWidth 设置为 0。否则,我认为更改 css 文件上的所有边距和填充确实很痛苦。

于 2012-05-23T11:24:24.127 回答
1

我遇到了和你一样的问题,所以这是我在最新的 Bootstrap 版本 2.3.1 上解决这个问题的方法:

首先,您需要使用类“row”向父 div 添加一个“no-space”类,如下所示:

<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:此方法也适用于响应式设计;)

于 2013-06-17T13:27:58.293 回答
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>
于 2013-05-31T11:38:18.857 回答
0

我有一排有两列。对于三个,相应地调整。我将此添加到我的 .css 中,该 .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%,中间没有装订线。

于 2012-09-12T17:31:09.053 回答
0

一般来说,如果您仍然想保留装订线,但只是想缩小或加宽它而不在最右边创建间隙,那么只需确保相关边距和宽度相加为 100%,记住边距是不适用于最左边的跨度。因此,对于您的 3 列布局,如果您想要 0.5% 的装订线,则选择 3*33% + 2*0.5% = 100%

.row-fluid .span4 {
    width: 33%;
    margin-left: 0.5%;
}
于 2013-05-09T12:09:02.540 回答
0

这是一个带和不带空格的等宽列的示例:http: //codepen.io/ngeorgiev/pen/Lgxin/

于 2014-03-31T15:37:27.797 回答