Центр n количество v-col в сетке vuetify с добавленным интервалом


Центр n количество v-col в сетке vuetify с добавленным интервалом

28.11.2020 12:23:21 Просмотров 47 Источник

Я пытаюсь центрировать n количество v-cols с интервалом слева и справа от cols, но не могу центрировать v-cols, выровненный с вышеупомянутым v-cols. Обратите внимание, что отзывчивость работает так, как задумано, но при максимальном размере экрана я хочу ограничить его двумя v-cols и выровнять его по другим горизонтальным длинам v-row, сохраняя при этом одинаковые длины v-cols.

В настоящее время я получаю это: enter image description here

От

<v-container>
  <v-row dense justify="center">
    <v-col cols="12" md="6" lg="4" xl="3">
      // ...
    </v-col>
  </v-row>

  <v-row dense justify="center">
    <v-col cols="12" sm="6" xs="6" md="6" lg="4" xl="3">
      // ...
    </v-col>
    <v-col cols="12" sm="6" xs="6" md="6" lg="4" xl="3">
      // ...
    </v-col>
  </v-row>

  <v-row dense justify="center">
    <v-col v-for="(item, n) in list" :key="n" cols="12" sm="6" md="6" lg="4" xl="4">
      // ...
    </v-col>
  </v-row>

То, что я пытаюсь сделать, можно увидеть ниже; enter image description here

Что можно сделать, чтобы добавить интервал по бокам красного v-cols, чтобы они были выровнены с другими вышеприведенными v-кольцами (в вышеприведенных v-строках)?

Редактировать: Теперь работает с этим кодом:

<v-container>
<!-- .. other rows -->

<v-row justify="center">
  <v-col cols="24" sm="12" xs="12" md="12" lg="8" xl="6">
    <v-row dense justify="center" class="green">
      <v-col v-for="(item, n) in list" :key="n" sm="12" xs="12" md="12" lg="8" xl="6" class="br text-center red">
        // content
      </v-col>
    </v-row>
  </v-col>
</v-row>
</v-container>
У вопроса есть решение - Посмотреть?

Ответы - Центр n количество v-col в сетке vuetify с добавленным интервалом / Center n amount of v-col in vuetify grid with added spacing

Является ответом!
hamid niakan

28.11.2020 06:08:10

Вы можете обернуть свой макет примерно так:

<v-row justify="center" align="center">
    <v-col cols="10">
      // Your layout goes here
    </v-col>
</v-row>

Первый элемент строки делает col внутри него центрированным, и поскольку опора cols элемента col установлена на 10 (или другое число, отличное от 12, которое соответствует вашим потребностям), он имеет равное пространство с боков.

Таким образом, любой макет, который вы помещаете внутрь этой обертки, будет выровнен.

Правка: я работал с этой идеей и приготовил ручку для вас, чтобы вы посмотрели. вот это ручка:

ручка кода макета vuetify

Помочь в развитии проекта:
Закрыть X