基于窗口大小AngularJs的动态列css

Question

这可能会在某个地方得到回答，但我不确定确切的术语，因为我是 Web 开发的新手。我正在使用 mean.js 应用程序，并且我有一个正在填充的容器：

<div class="container-fluid">
  <div class="col-sm-4 col-md-6 col-lg-4">
     <div class="panel" ng-repeat='item in itemList'>
      {{item.content}}
     </div>
  </div>
</div>

但我实际上并不希望 col 大小与那里指定的一样。我想将面板大小设置为设定大小，例如每个面板 150 像素 X 150 像素，并且我希望行根据屏幕的分辨率填充列。因此，如果该列到达屏幕的末尾，我希望它仅在这种情况下开始一个新行。例如，如果我有 10 个面板并且有人有一个 1500 像素宽的窗口，它只会显示 1 行，但是当他们缩小窗口时，它会重新调整，直到最终每行只显示 1 个面板。

希望这是可能的，但任何建议都将不胜感激！

Answer 1

为这些内盒设置display:inline-block。 这将确保，这些盒子将占据一行中的所有可用空间， 之后会转到下一行

.c-panel {
  width: 150px;
  height: 150px;
  background: red;
  margin: 5px;
  display: inline-block;
}

<div class="container-fluid">
  <div class="c-panel"></div>
  <div class="c-panel"></div>
  <div class="c-panel"></div>
  <div class="c-panel"></div>
  <div class="c-panel"></div>
  <div class="c-panel"></div>
  <div class="c-panel"></div>
  <div class="c-panel"></div>
  <div class="c-panel"></div>
  <div class="c-panel"></div>
  <div class="c-panel"></div>
  <div>