那些遇到过的问题

如何做多个跨度的twitter bootstrap之间没有间距

fal*_*ter 24 html css twitter-bootstrap

我试图在页面上获得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>
Run Code Online (Sandbox Code Playgroud)

我真的不确定如何使用bootstrap实现我想要的东西 - 任何帮助表示赞赏

And*_*ich 31

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

CSS

.no-space [class*="span"] {
    margin-left: 0;
}
Run Code Online (Sandbox Code Playgroud)

然后你可以把它包含在容器.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>
Run Code Online (Sandbox Code Playgroud)

另请注意,.row容器类20px在左侧移除以容纳网格元素,因此您可能必须删除它,如下所示:

.no-space {
    margin-left:0;
}
Run Code Online (Sandbox Code Playgroud)

所以,到处看看哪些有效.

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

  • 这一半工作 - 它允许盒子彼此相邻,但然后在最右侧留下间隙 - 我可以通过手动添加宽度并制作它来解决它!重要,但我不确定这是最好的这样做的方法,因为它需要更改所有@media查询.谢谢你 - 到目前为止最好的答案! (9认同)
  • @kevyn最右边的空格是我们从每个`span`网格元素中删除的边距,您可以在[Customize](http://twitter.github.com/bootstrap/download.html)上滚动自己的网格引导文档页面("网格系统"部分)的一部分,在网格元素之间有一个零像素的装订线,只需复制生成的网格和响应计算,并将其放在您自己的CSS样式表中,这样您就可以得到一个精确的具有比例宽度的网格. (4认同)

alv*_*epa 16

完成课程,覆盖.row-fluid,添加.no-space.

/*
 * 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%;
}
Run Code Online (Sandbox Code Playgroud)

用法:

<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>
Run Code Online (Sandbox Code Playgroud)

Demo on Bootply

Joh*_*lia 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%;
}
Run Code Online (Sandbox Code Playgroud)

Jon*_*ram 7

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

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

归档时间：

查看次数：

33831 次

最近记录：

11 年，7 月 前
仅删除特定div的装订线空间 66
更多相关链接
相关归档
如何保持标题静态,滚动时总是在顶部？ 61
仅在移动视图中隐藏div标签？ 57
使用jQuery动画marginLeft 23
按钮的内部发光效果 19
Django Forms - 如何使用前缀参数 18
真正的HTML调试是否可行？ 18
如何使用Twitter Bootstrap按钮点击导航到另一个页面？ 14
无法使Bootstrap 4 Horizo​​ntal Form按要求工作 13
Boostrap:重新调整大小时,如何在图像上"粘贴"按钮 6
bootstrap导航头高度 3
难疑归档
如何从列表列表中制作一个平面列表？ 2950
如何在JavaScript中获取查询字符串值？ 2701
在jQuery中添加表行 2331
如何在Python中删除尾部换行符？ 1593
我怎样才能找到带有Mathematica的Waldo？ 1538
将文件从Docker容器复制到主机 1438
在JavaScript中检测"无效日期"日期实例 1381
在Bash中循环遍历一串字符串？ 1371
如何从Git的暂存区域中删除单个文件,但不将其从索引中删除或撤消对文件本身的更改？ 1177
从Docker容器内部,如何连接到本机的本地主机？ 1176