小部件仪表板的脚手架

Question

我正在开发一个带有小部件仪表板的项目，它看起来像是一个更漂亮的iGoogle版本。目前，每个.widget基本上都是一个bootstrap＆＃34;列＆＃34;宽度为4,8和12（我们有12列布局）。但这根本不起作用，因为它留下空的空间并导致不可预测的换行（特别是当左边的小部件比右边的小部件长时）：

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

Plunker：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);
    }
  }
}