动态列 css 基于 Window 大小 AngularJs

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>

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

希望这是可能的，但如有任何建议，我们将不胜感激！

Answer 1

为那些内框设置display:inline-block。这将确保这些框将所有可用的 space 排成一行，之后，它将转到下一行

.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>

动态列 css 基于 Window 大小 AngularJs

Dynamic Column css Based On Window Size AngularJs

html

css

angularjs

angular-ui-bootstrap

meanjs