css - 小部件仪表板的脚手架

Question

我正在开发一个包含小部件仪表板的元素，它看起来像更漂亮的 iGoogle 版本。目前，每个 .widget 本质上都是一个 Bootstrap “列”，宽度为 4、8 和 12(我们有 12 列布局)。但这根本行不通，因为它会留下空白并导致不可预测的换行符(尤其是当左侧的小部件比右侧的小部件长时):

有人可以提供正确的小部件样式吗？谢谢!

笨蛋:http://plnkr.co/edit/speljn9WYZ2r7g6NnnLD?p=preview

Answer 1

回答我自己的问题，这是我最终使用的小部件样式:

.widget {
  background: #fff;
  border: 1px solid #c2c0c5;
  border-top-width: 2px;
  padding: 15px;
  margin: 10px;
  font-family: "ProxReg", Helvetica, Arial, sans-serif;
  font-size: 14px;
  display: inline-table;

  &.widget-1 {
    width: calc(33.3333333% - 20px);
  }

  &.widget-2 {
    width: calc(66.6666666% - 20px);
  }

  &.widget-3 {
    width: calc(100% - 20px);
  }

  @media screen and (max-width: $break-small) {
    &.widget-1,
    &.widget-2,
    &.widget-3 {
      width: calc(100% - 20px);
    }
  }
}