html - 如何在没有间距的情况下进行多个跨度 twitter bootstrap

Question

我试图在一个页面上获得 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>

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

score 31 · Accepted Answer

您可以创建自己的类来删除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/

score 16 · Accepted Answer

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

score 11 · Accepted Answer

我补充说：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%;
}

score 7 · Accepted Answer

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

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

score 1 · Accepted Answer

如果您在 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);

score 1 · Accepted Answer

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

score 1 · Accepted Answer

我遇到了和你一样的问题，所以这是我在最新的 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：此方法也适用于响应式设计；）

score 0 · Accepted Answer

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

score 0 · Accepted Answer

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

score 0 · Accepted Answer

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

.row-fluid .span4 {
    width: 33%;
    margin-left: 0.5%;
}

score 0 · Accepted Answer

0

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

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

html - 如何在没有间距的情况下进行多个跨度 twitter bootstrap

11 回答 11

Related

Reference