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

【问题标题】：How to do multiple spans twitter bootstrap without spacing between如何在没有间距的情况下进行多个跨度twitter bootstrap
【发布时间】：2012-05-29 21:29:43
【问题描述】：

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

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

【问题讨论】：

这个问题与这里提出的问题类似：stackoverflow.com/questions/16489307/…。寻找有用的答案，因为该问题还询问如何删除排水沟（跨度 div 之间的空格），仅限特定 div 或 div。

标签： html css twitter-bootstrap

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

首先，您需要向父 div 添加一个“无空格”类，其类为“row”，如下所示：

<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：这种方法也适用于响应式设计；）

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

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

【讨论】：

感谢@Skelly 提供演示链接。
谢谢！！（我知道用简单的“谢谢”来评论是很笨的，但它也让其他人知道这是正确的答案）
恕我直言，这就是答案。
谢谢。我知道这是一个旧的答案/问题，并且引导程序目前在 v3 中。只是想注意，如果你使用它会破坏响应性，例如row-fluid 中的spanX 将在一定的窗口大小后转换为width: 100%。为了保持这种响应能力，您可以将此类包装在 media query (@media) 中。我认为“跳跃”在 767 像素处，因此：@media (min-width: 767px){ }。
就像 MeRuud 所说的那样，这会破坏响应能力，另一种解决方法是在你的 css 中添加：@media (max-width: 767px) { .row-fluid.no-space [class*="span"] { float: none; display: block; width: 100%; margin-left: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } }

【解决方案6】：

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

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

【讨论】：

【解决方案7】：

出于这个确切原因，我添加了：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%;
}

【讨论】：

真的很好... :) 谢谢！
谢谢，这是我一直在寻找的，因为这是我尝试做的，遵循“标准”引导逻辑。
这需要成为引导程序的一部分：p。我对其进行了编辑，因此只需指定 row-fluid.offset0。

【解决方案8】：

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

【讨论】：

自然地，您可以创建自己的类，而不是仅仅使用引导类。此外，您可以使用以下方法创建任意宽度的跨度：myspan number / number of columns。因此，如果您有 12 列并且想要一个 5 跨度，那么它只需 5/12 即可为您提供宽度百分比。

【解决方案9】：

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

因此，试试看什么是有效的。

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

【讨论】：

这一半有效 - 它允许盒子彼此相邻放置，但在最右侧留下一个间隙 - 我可以通过手动添加宽度并使其变得重要来解决它，但是我不确定这是最好的方法，因为它需要更改所有@media 查询。不过谢谢 - 迄今为止最好的答案！
@kevyn 最右边的空格是我们从每个span 网格元素中删除的边距，您可以在引导文档页面的Customize 部分滚动您自己的网格（@987654331 @ 部分），网格元素之间的间距为零像素，只需复制带有响应计算的结果网格并将其放置在您自己的 css 样式表中，这样您就可以拥有一个具有成比例宽度的精确网格。
这也破坏了偏移量，这只是跨度上的左边距覆盖

【解决方案10】：

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

【讨论】：

【解决方案11】：

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

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

【讨论】：

重建所有内容可能比在 5 分钟内编辑 CSS 中的边距要多得多...