Question

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

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

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

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

Answer 1

由于列的高度并不相同，因此您需要为大视口添加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

Answer 2

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

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

找到此解决方案here

Answer 3

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

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

Answer 4

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

Answer 5

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

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

Answer 6

认为这可能对某些人有所帮助。只需将以下内容添加到样式表即可。我提供了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>

Bootstrap 3列问题

6 个答案:

CSS

SCSS