那些遇到过的问题

如何做多个跨度的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 年，5 月 前
仅删除特定div的装订线空间 66
更多相关链接
相关归档
如何在失去焦点的情况下检查从DOM中消失的html元素？ 97
设置divs背景图像以适合其大小？ 30
我们可以在每个<tr>上面的表格中添加div吗？ 30
bootstrap 3容器上的box-shadow 23
使滚动条始终在div - chrome中可见 18
中心不显示Bootstrap 2的模态插件 11
在Reaction-bootstrap中FormControl和ControlLabel之间的高度不同 7
Bootstrap折叠导航栏没有扩展 6
使用AngularJS/UI Bootstrap自定义$ validator和getterSetter消失值 5
更改下拉选择选项取决于datepicker选择 5
难疑归档
如何在Python中获取当前时间 2618
如何制作一个很好的R可重复的例子 2474
JavaScript .prototype如何工作？ 1988
在Git中撤消一个文件的工作副本修改？ 1550
我应该如何道德地接近用户密码存储以便以后的明文检索？ 1346
谁正在侦听Mac OS X上的给定TCP端口？ 1267
UnicodeEncodeError:'ascii'编解码器无法对位置20中的字符u'\ xa0'进行编码:序数不在范围内(128) 1222
基于容器宽度的字体缩放 1083
如何配置Visual Studio代码以始终在新选项卡中打开文件？ 1078
Ukkonen的简明英语后缀树算法 1065