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

Posted 2023-03-06

【中文标题】基于窗口大小AngularJs的动态列css

【英文标题】：Dynamic Column css Based On Window Size AngularJs

【发布时间】：2018-10-05 01:25:04

【问题描述】：

这可能会在某个地方得到回答，但我不确定确切的术语，因为我是 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 个面板。

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

【参考方案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>

【讨论】：

嗨，我试了一下。它似乎没有工作。我使用引导面板作为我的盒子，所以我将您提供的 css 设置为 .panel 的 css，但它没有改变。

@Code2Code，尝试更改类名