Bootstrap 3列问题

时间:2013-08-30 00:22:38

标签: html css twitter-bootstrap twitter-bootstrap-3

我正在使用bootstrap 3,我是新手,但它似乎是从2开始的一个相当简单的过渡。

以下是带有代码的jsfiddle:http://jsfiddle.net/AHvLW/

这是一张关于它们在col-md-4中的渲染方式的图像:

我不明白,它在jsFiddle中运行正常,但在我的索引文件中没有。任何人都会遇到类似的问题,可能知道它有什么用吗?

6 个答案:

答案 0 :(得分:20)

由于列的高度并不相同,因此您需要为大视口添加clearfix <div>,就像新行应该开始一样,即在第3列和第4列之间:

<div class="row">
    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">...</div>
    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">...</div>
    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">...</div>

    <!-- Add the extra clearfix for only the required viewport -->
    <div class="clearfix visible-md visible-lg"></div>

    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">...</div>
    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">...</div>
    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">...</div>
</div>

<强> Demo fiddle

答案 1 :(得分:10)

你可以用这个css轻松解决它:

.col-md-4:nth-child(3n+1){
    clear: left;
}

找到此解决方案here

答案 2 :(得分:2)

不是您问题的答案,但您应该能够优化您的代码,因为不需要使用所有大小的类。

<div class="row">
    <div class="col-md-4 col-xs-6">...</div>
    <div class="col-md-4 col-xs-6">...</div>
    <div class="col-md-4 col-xs-6">...</div>

    <!-- Add the extra clearfix for only the required viewport -->
    <div class="clearfix visible-md visible-lg"></div>

    <div class="col-md-4 col-xs-6">...</div>
    <div class="col-md-4 col-xs-6">...</div>
    <div class="col-md-4 col-xs-6">...</div>
</div>

答案 3 :(得分:1)

请检查您的div标签是否正确关闭,并且您正在使用的类已在您的代码中正确引用。

答案 4 :(得分:1)

如果您正在寻找一个解决方案,您不必担心所有三个列的高度相同,并且由于每个不同的屏幕尺寸调用不同的列号,您无法使用包装器可以应用类似于我的解决方案的规则,其中我将id应用于列的主包装,然后将列大小设置为具有最小高度。

main#shop .col-md-3 {
    min-height:600px;
}

答案 5 :(得分:1)

认为这可能对某些人有所帮助。只需将以下内容添加到样式表即可。我提供了CSS或SCSS。

CSS

/*================ Row Uniform ==================*/
.row-uniform {
  margin-right: -15px;
  margin-left: -15px;
}
.row-uniform:after {
  clear: both;
}
.row-uniform:before {
  display: table;
  content: '';
}
.row-uniform .col-xs-6:nth-child(2n+1) {
  clear: left;
}
.row-uniform .col-xs-4:nth-child(3n+1) {
  clear: left;
}
.row-uniform .col-xs-3:nth-child(4n+1) {
  clear: left;
}
.row-uniform .col-xs-2:nth-child(6n+1) {
  clear: left;
}
@media (min-width: 768px) and (max-width: 992px) {
  .row-uniform .col-sm-6:nth-child(2n+1) {
    clear: left;
  }
  .row-uniform .col-sm-4:nth-child(3n+1) {
    clear: left;
  }
  .row-uniform .col-sm-3:nth-child(4n+1) {
    clear: left;
  }
  .row-uniform .col-sm-2:nth-child(6n+1) {
    clear: left;
  }
}
@media (min-width: 992px) and (max-width: 1200px) {
  .row-uniform .col-md-6:nth-child(2n+1) {
    clear: left;
  }
  .row-uniform .col-md-4:nth-child(3n+1) {
    clear: left;
  }
  .row-uniform .col-md-3:nth-child(4n+1) {
    clear: left;
  }
  .row-uniform .col-md-2:nth-child(6n+1) {
    clear: left;
  }
}
@media (min-width: 1200px) {
  .row-uniform .col-lg-6:nth-child(2n+1) {
    clear: left;
  }
  .row-uniform .col-lg-4:nth-child(3n+1) {
    clear: left;
  }
  .row-uniform .col-lg-3:nth-child(4n+1) {
    clear: left;
  }
  .row-uniform .col-lg-2:nth-child(6n+1) {
    clear: left;
  }
}

SCSS

/*================ Row Uniform ==================*/

.row-uniform {
  margin-right: -15px;
  margin-left: -15px;
  &:after {
    clear:both;

  }
  &:before {
    display: table;
    content: '';
  }

  // 2
  .col-xs-6:nth-child(2n+1) {
    clear: left;
  }
  // 3
  .col-xs-4:nth-child(3n+1) {
    clear: left;
  }
  // 4
  .col-xs-3:nth-child(4n+1) {
    clear: left;
  }
  // 6
  .col-xs-2:nth-child(6n+1) {
    clear: left;
  }
  // sm
  @media (min-width:768px) and (max-width:992px) {
    // 2
    .col-sm-6:nth-child(2n+1) {
      clear: left;
    }
    // 3
    .col-sm-4:nth-child(3n+1) {
      clear: left;
    }
    // 4
    .col-sm-3:nth-child(4n+1) {
      clear: left;
    }
    // 6
    .col-sm-2:nth-child(6n+1) {
      clear: left;
    }
  }
  // md
  @media (min-width:992px) and (max-width:1200px) {
    // 2
    .col-md-6:nth-child(2n+1) {
      clear: left;
    }
    // 3
    .col-md-4:nth-child(3n+1) {
      clear: left;
    }
    // 4
    .col-md-3:nth-child(4n+1) {
      clear: left;
    }
    // 6
    .col-md-2:nth-child(6n+1) {
      clear: left;
    }
  }
  // lg
  @media (min-width:1200px) {
    // 2
    .col-lg-6:nth-child(2n+1) {
      clear: left;
    }
    // 3
    .col-lg-4:nth-child(3n+1) {
      clear: left;
    }
    // 4
    .col-lg-3:nth-child(4n+1) {
      clear: left;
    }
    // 6
    .col-lg-2:nth-child(6n+1) {
      clear: left;
    }
  }
}

然后,您只需为行添加新的行 - 统一。

<div class="row-uniform">
  <div class="col-sm-6 col-md-4 col-lg-3">
  </div>
  <div class="col-sm-6 col-md-4 col-lg-3">
  </div>
  <div class="col-sm-6 col-md-4 col-lg-3">
  </div>
  <div class="col-sm-6 col-md-4 col-lg-3">
  </div>
  <div class="col-sm-6 col-md-4 col-lg-3">
  </div>
  <div class="col-sm-6 col-md-4 col-lg-3">
  </div>
  <div class="col-sm-6 col-md-4 col-lg-3">
  </div>
</div>