响应栏不起作用？

Question

对我的反应方式有问题。我的12个列块不是在一行上，最后两个块在它下面，而是应该都在一行中。

每一行都有自己的列块。

您可以在我的代码片段中获得我所指的完整代码视图。http://codepen.io/riwakawebsitedesigns/pen/zbmLE

.container {
  display: block;
  width: 94%;
  max-width: 1280px;
  margin: 2% auto 0 auto;
}

.row {
  display: block;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

.column {
  background: #e5e5e5;
  min-height: 40px;
  text-align: center;
  float: left;
  margin-right: 20px;
}

.block-1 {
  width: 8.33333333%;
}

.block-2 {
  width: 16.66666667%;
}

.block-3 {
  width: 25%;
}

.block-4 {
  width: 33.33333333%;
}

.block-5 {
  width: 41.66666667%;
}

.block-6 {
  width: 50%;
}

.block-7 {
  width: 58.33333333%;
}

.block-8 {
  width: 66.66666667%;
}

.block-9 {
  width: 75%;
}

.block-10 {
  width: 83.33333333%;
}

.block-11 {
  width: 91.66666667%;
}

.block-12 {
  width: 100%;
}

.last, .omega, .end{
  margin: 0; 
}

Answer 1

移除栏上的页边距：

.column {
  background: #e5e5e5;
  min-height: 40px;
  text-align: center;
  float: left;
  margin-right: 20px; <!-- remove -->
}

由于100% x 12，而不是达到20px的宽度，边框造成的宽度较小。因此，如果得到100% + 240px，这将导致最后2移动到下面。

DEMO HERE

Answer 2

鲁迪是对的，你没有考虑到列之间的排水沟。按他的方式做或..。

简单解决方案：

试着从每个块类中减去2%，在这里工作。

花式解决方案：

如果使用较少的变量，则可以使用变量，因此可以执行以下操作：

/*LESS FILE*/

@gutter: "20px";

.block1 {
   width: (8.333% - @gutter);
}

希望能帮上忙。