bootstrap - 无缝跨度,响应

时间:2013-05-19 11:58:15

标签: css twitter-bootstrap

恶魔。我被困在引导网格中。

正如我们所知,bootstap为其.span *添加了一些余量,因此,我需要删除该边距以显示多个跨度而不添加任何行。

我已经从twitter bootstrap定制下载生成了我的CSS。我将排水沟设为0,以便不应将余量添加到span*

但它无法在响应模式下工作。请帮我添加以下代码的响应功能:

.no-gutter.row-fluid [class*="span"]:first-child {
  margin-left: 0;
}
.no-gutter.row-fluid .controls-row [class*="span"] + [class*="span"] {
  margin-left: 0%;
}
.no-gutter.row-fluid .span12 {
  width: 99.99999999999999%;
  *width: 99.93055555555554%;
}
.no-gutter.row-fluid .span11 {
  width: 91.66666666666666%;
  *width: 91.59722222222221%;
}
.no-gutter.row-fluid .span10 {
  width: 83.33333333333331%;
  *width: 83.26388888888887%;
}
.no-gutter.row-fluid .span9 {
  width: 74.99999999999999%;
  *width: 74.93055555555554%;
}
.no-gutter.row-fluid .span8 {
  width: 66.66666666666666%;
  *width: 66.59722222222221%;
}
.no-gutter.row-fluid .span7 {
  width: 58.33333333333333%;
  *width: 58.263888888888886%;
}
.no-gutter.row-fluid .span6 {
  width: 49.99999999999999%;
  *width: 49.93055555555555%;
}
.no-gutter.row-fluid .span5 {
  width: 41.66666666666666%;
  *width: 41.597222222222214%;
}
.no-gutter.row-fluid .span4 {
  width: 33.33333333333333%;
  *width: 33.263888888888886%;
}
.no-gutter.row-fluid .span3 {
  width: 24.999999999999996%;
  *width: 24.930555555555554%;
}
.no-gutter.row-fluid .span2 {
  width: 16.666666666666664%;
  *width: 16.59722222222222%;
}
.no-gutter.row-fluid .span1 {
  width: 8.333333333333332%;
  *width: 8.263888888888888%;
}
.no-gutter.row-fluid .offset12 {
  margin-left: 99.99999999999999%;
  *margin-left: 99.8611111111111%;
}
.no-gutter.row-fluid .offset12:first-child {
  margin-left: 99.99999999999999%;
  *margin-left: 99.8611111111111%;
}
.no-gutter.row-fluid .offset11 {
  margin-left: 91.66666666666666%;
  *margin-left: 91.52777777777777%;
}
.no-gutter.row-fluid .offset11:first-child {
  margin-left: 91.66666666666666%;
  *margin-left: 91.52777777777777%;
}
.no-gutter.row-fluid .offset10 {
  margin-left: 83.33333333333331%;
  *margin-left: 83.19444444444443%;
}
.no-gutter.row-fluid .offset10:first-child {
  margin-left: 83.33333333333331%;
  *margin-left: 83.19444444444443%;
}
.no-gutter.row-fluid .offset9 {
  margin-left: 74.99999999999999%;
  *margin-left: 74.8611111111111%;
}
.no-gutter.row-fluid .offset9:first-child {
  margin-left: 74.99999999999999%;
  *margin-left: 74.8611111111111%;
}
.no-gutter.row-fluid .offset8 {
  margin-left: 66.66666666666666%;
  *margin-left: 66.52777777777777%;
}
.no-gutter.row-fluid .offset8:first-child {
  margin-left: 66.66666666666666%;
  *margin-left: 66.52777777777777%;
}
.no-gutter.row-fluid .offset7 {
  margin-left: 58.33333333333333%;
  *margin-left: 58.19444444444444%;
}
.no-gutter.row-fluid .offset7:first-child {
  margin-left: 58.33333333333333%;
  *margin-left: 58.19444444444444%;
}
.no-gutter.row-fluid .offset6 {
  margin-left: 49.99999999999999%;
  *margin-left: 49.86111111111111%;
}
.no-gutter.row-fluid .offset6:first-child {
  margin-left: 49.99999999999999%;
  *margin-left: 49.86111111111111%;
}
.no-gutter.row-fluid .offset5 {
  margin-left: 41.66666666666666%;
  *margin-left: 41.52777777777777%;
}
.no-gutter.row-fluid .offset5:first-child {
  margin-left: 41.66666666666666%;
  *margin-left: 41.52777777777777%;
}
.no-gutter.row-fluid .offset4 {
  margin-left: 33.33333333333333%;
  *margin-left: 33.19444444444444%;
}
.no-gutter.row-fluid .offset4:first-child {
  margin-left: 33.33333333333333%;
  *margin-left: 33.19444444444444%;
}
.no-gutter.row-fluid .offset3 {
  margin-left: 24.999999999999996%;
  *margin-left: 24.86111111111111%;
}
.no-gutter.row-fluid .offset3:first-child {
  margin-left: 24.999999999999996%;
  *margin-left: 24.86111111111111%;
}
.no-gutter.row-fluid .offset2 {
  margin-left: 16.666666666666664%;
  *margin-left: 16.52777777777778%;
}
.no-gutter.row-fluid .offset2:first-child {
  margin-left: 16.666666666666664%;
  *margin-left: 16.52777777777778%;
}
.no-gutter.row-fluid .offset1 {
  margin-left: 8.333333333333332%;
  *margin-left: 8.194444444444443%;
}
.no-gutter.row-fluid .offset1:first-child {
  margin-left: 8.333333333333332%;
  *margin-left: 8.194444444444443%;
}

1 个答案:

答案 0 :(得分:2)

你不需要......

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

而不只是..

.no-gutter.row-fluid [class*="span"]:first-child {
  margin-left: 0;
}

Demo