Динамический столбец css на основе размера окна AngularJs - PullRequest
0 голосов
/ 24 апреля 2018

На это можно где-то ответить, но я не уверен в точной терминологии, поскольку я новичок в веб-разработке.Я работаю с приложением 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>

Но на самом деле я не хочу, чтобы размеры столбцов были такими, как указано там.Я хотел бы установить размеры панели равными установленному размеру, например, 150 х 150 на панель, и я хочу, чтобы строки заполнялись столбцами в зависимости от разрешения экрана.Поэтому, если столбец попадает в конец экрана, я хочу, чтобы он начинал новую строку только в этом случае.Например, если бы у меня было 10 панелей, а у кого-то было окно шириной 1500px, оно показывало бы только 1 строку, но, когда они сокращали окно, оно перестраивалось, пока в конечном итоге не показывалось только 1 панель на строку.

Надеюсь, это возможно, но любые предложения будут оценены!

1 Ответ

0 голосов
/ 24 апреля 2018

Установите 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...