8

我正在使用bootstrap 3它，并且对它很陌生，但这似乎是从 2 开始的一个相当简单的过渡。

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

这是当它们都在 col-md-4 中时它如何呈现的图像：

我不明白，它在 jsFiddle 中运行良好，但在我的索引文件中却没有。任何人都遇到过类似的问题，可能知道它是怎么回事？

4

6 回答 6

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>

演示小提琴

于 2013-08-30T00:48:46.303 回答
10

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

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

在这里找到了这个解决方案

于 2014-05-29T07:05:03.183 回答
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>
于 2013-08-30T01:10:59.047 回答
1

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

于 2013-08-30T00:26:23.300 回答
1

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

main#shop .col-md-3 {
    min-height:600px;
}
于 2015-12-14T14:03:05.673 回答
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>
于 2017-01-13T00:19:34.940 回答