간격이 추가 된 vuetify 그리드에서 n 양의 v-col 중앙

asisleep

나는 n열의 왼쪽과 오른쪽 간격으로 v-col의 중앙 양을 시도하고 있지만 v-cols위와 정렬 할 수는 없습니다 v-cols. 응답 성은 의도 한대로 작동하지만 최대 화면 크기 에서는 v-col의 길이를 동일하게 유지하면서 2 개로 제한 v-cols하고 다른 v-row가로 길이에 맞추고 싶습니다 .

현재 나는 이것을 얻는다 : 여기에 이미지 설명 입력

에서

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

내가 달성하려는 것은 아래에서 볼 수 있습니다. 여기에 이미지 설명 입력

빨간색 측면에 간격을 추가 v-cols하여 위의 다른 v-col (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>
하미드 니아 칸

다음과 같이 레이아웃을 래핑 할 수 있습니다.

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

첫 번째 행 요소는 내부의 col을 중앙에 배치하고 col 요소의 cols prop이 10 (또는 필요에 맞는 12 이외의 다른 숫자)로 설정되어 있기 때문에 측면에서 동일한 공간을 갖습니다.

따라서이 래퍼 안에 넣은 모든 레이아웃이 정렬됩니다.

편집 : 저는이 아이디어를 가지고 작업했고 여러분이 볼 수 있도록 펜을 준비했습니다. 여기에 펜이 있습니다.

vuetify 레이아웃 코드 펜

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

쿼리는 이전 로그인에서 설정된 시간 간격 내에서 사용자가 로그인의 수를 얻을 수

분류에서Dev

시간 간격 사이에 중첩 된 배열의 요소 설정 해제

분류에서Dev

중첩 된 v-for 루프의 입력에 v 모델 추가

분류에서Dev

v-col vuetify에서 동적으로 열 변경

분류에서Dev

:: after를 사용하여 추가 된 중앙 입력 필드 및 아이콘

분류에서Dev

vuetify v-data-table에 중첩 된 개체 데이터가 표시되지 않음

분류에서Dev

vuetify에서 v-card에 이미지를 추가하는 방법

분류에서Dev

그리드의 중앙 이미지 (CSS)

분류에서Dev

Vuetify에서 두 개의 서로 다른 v-col의 높이 변경

분류에서Dev

CSS 테이블 스타일-테이블 중앙 테두리 사이의 간격

분류에서Dev

Vuetify와 수직 중앙 이미지에서 동일한 높이의 v-col을 만드는 방법은 무엇입니까?

분류에서Dev

패싯 된 ggplot에 중앙선 추가

분류에서Dev

PostgreSQL-N 간격 동안 datetime 열로 그룹화 된 테이블의 항목 수 가져 오기

분류에서Dev

Vuetify-중앙에 텍스트가있는 정사각형 V 카드 만들기 (양쪽 축)

분류에서Dev

vuetify에 중첩 된 데이터 표시

분류에서Dev

중앙 양식에 반응 형 이미지 추가

분류에서Dev

개체의 중첩 된 vuetify v-btn-toggle 그룹이 값을 유지하지 않습니다.

분류에서Dev

키보드가 표시된 후 양식이 iOS7에서 중앙에 있지 않습니다.

분류에서Dev

마우스 오버 된 이미지를 중앙에 맞추기

분류에서Dev

추가 된 타일의 중앙지도

분류에서Dev

테이블이 다른 양식에서 사용 된 후 테이블의 데이터로 그리드를 채운 후 "파일 사용 중"오류가 발생 함

분류에서Dev

스케일링 된 스테이지의 중앙에 레이어

분류에서Dev

ScalaFX의 BorderPane 중앙에 SubScene 추가

분류에서Dev

Symfony2-중첩 된 양식의 하위 양식에서 필드 추가 또는 제거

분류에서Dev

레이아웃 문제 : 중앙에 두 개의 고정 된 열

분류에서Dev

정렬 된 두 배열의 중앙값 알고리즘 이해

분류에서Dev

양쪽 정렬 된 갤러리 레이아웃에서 이미지 중간의 가운데 아이콘

분류에서Dev

4 개의 img가있는 부트 스트랩 (col xs-12 col-sm-6 col-md-2 col-lg-2)에서 행을 중앙에 배치하는 방법은 무엇입니까?

분류에서Dev

JointJS-Rappid에서 원자 모양의 중앙에 이미지를 추가하는 방법

Related 관련 기사

  1. 1

    쿼리는 이전 로그인에서 설정된 시간 간격 내에서 사용자가 로그인의 수를 얻을 수

  2. 2

    시간 간격 사이에 중첩 된 배열의 요소 설정 해제

  3. 3

    중첩 된 v-for 루프의 입력에 v 모델 추가

  4. 4

    v-col vuetify에서 동적으로 열 변경

  5. 5

    :: after를 사용하여 추가 된 중앙 입력 필드 및 아이콘

  6. 6

    vuetify v-data-table에 중첩 된 개체 데이터가 표시되지 않음

  7. 7

    vuetify에서 v-card에 이미지를 추가하는 방법

  8. 8

    그리드의 중앙 이미지 (CSS)

  9. 9

    Vuetify에서 두 개의 서로 다른 v-col의 높이 변경

  10. 10

    CSS 테이블 스타일-테이블 중앙 테두리 사이의 간격

  11. 11

    Vuetify와 수직 중앙 이미지에서 동일한 높이의 v-col을 만드는 방법은 무엇입니까?

  12. 12

    패싯 된 ggplot에 중앙선 추가

  13. 13

    PostgreSQL-N 간격 동안 datetime 열로 그룹화 된 테이블의 항목 수 가져 오기

  14. 14

    Vuetify-중앙에 텍스트가있는 정사각형 V 카드 만들기 (양쪽 축)

  15. 15

    vuetify에 중첩 된 데이터 표시

  16. 16

    중앙 양식에 반응 형 이미지 추가

  17. 17

    개체의 중첩 된 vuetify v-btn-toggle 그룹이 값을 유지하지 않습니다.

  18. 18

    키보드가 표시된 후 양식이 iOS7에서 중앙에 있지 않습니다.

  19. 19

    마우스 오버 된 이미지를 중앙에 맞추기

  20. 20

    추가 된 타일의 중앙지도

  21. 21

    테이블이 다른 양식에서 사용 된 후 테이블의 데이터로 그리드를 채운 후 "파일 사용 중"오류가 발생 함

  22. 22

    스케일링 된 스테이지의 중앙에 레이어

  23. 23

    ScalaFX의 BorderPane 중앙에 SubScene 추가

  24. 24

    Symfony2-중첩 된 양식의 하위 양식에서 필드 추가 또는 제거

  25. 25

    레이아웃 문제 : 중앙에 두 개의 고정 된 열

  26. 26

    정렬 된 두 배열의 중앙값 알고리즘 이해

  27. 27

    양쪽 정렬 된 갤러리 레이아웃에서 이미지 중간의 가운데 아이콘

  28. 28

    4 개의 img가있는 부트 스트랩 (col xs-12 col-sm-6 col-md-2 col-lg-2)에서 행을 중앙에 배치하는 방법은 무엇입니까?

  29. 29

    JointJS-Rappid에서 원자 모양의 중앙에 이미지를 추가하는 방법

뜨겁다태그

보관