간격이 추가 된 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 이외의 다른 숫자)로 설정되어 있기 때문에 측면에서 동일한 공간을 갖습니다.
따라서이 래퍼 안에 넣은 모든 레이아웃이 정렬됩니다.
편집 : 저는이 아이디어를 가지고 작업했고 여러분이 볼 수 있도록 펜을 준비했습니다. 여기에 펜이 있습니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
에서 수정
관련 기사
Related 관련 기사
- 1
Vuetify와 수직 중앙 이미지에서 동일한 높이의 v-col을 만드는 방법은 무엇입니까?
- 2
Vuetify-중앙에 텍스트가있는 정사각형 V 카드 만들기 (양쪽 축)
- 3
Vuetify에서 두 개의 서로 다른 v-col의 높이 변경
- 4
추가 된 타일의 중앙지도
- 5
패싯 된 ggplot에 중앙선 추가
- 6
중앙 양식에 반응 형 이미지 추가
- 7
키보드가 표시된 후 양식이 iOS7에서 중앙에 있지 않습니다.
- 8
중첩 된 v-for 루프의 입력에 v 모델 추가
- 9
JointJS-Rappid에서 원자 모양의 중앙에 이미지를 추가하는 방법
- 10
개체의 중첩 된 vuetify v-btn-toggle 그룹이 값을 유지하지 않습니다.
- 11
vuetify v-data-table에 중첩 된 개체 데이터가 표시되지 않음
- 12
:: after를 사용하여 추가 된 중앙 입력 필드 및 아이콘
- 13
테이블이 다른 양식에서 사용 된 후 테이블의 데이터로 그리드를 채운 후 "파일 사용 중"오류가 발생 함
- 14
양쪽 정렬 된 갤러리 레이아웃에서 이미지 중간의 가운데 아이콘
- 15
ScalaFX의 BorderPane 중앙에 SubScene 추가
- 16
CSS 테이블 스타일-테이블 중앙 테두리 사이의 간격
- 17
그리드의 중앙 이미지 (CSS)
- 18
PostgreSQL-N 간격 동안 datetime 열로 그룹화 된 테이블의 항목 수 가져 오기
- 19
마우스 오버 된 이미지를 중앙에 맞추기
- 20
시간 간격 사이에 중첩 된 배열의 요소 설정 해제
- 21
쿼리는 이전 로그인에서 설정된 시간 간격 내에서 사용자가 로그인의 수를 얻을 수
- 22
Symfony2-중첩 된 양식의 하위 양식에서 필드 추가 또는 제거
- 23
정렬 된 두 배열의 중앙값 알고리즘 이해
- 24
vuetify에 중첩 된 데이터 표시
- 25
스케일링 된 스테이지의 중앙에 레이어
- 26
v-col vuetify에서 동적으로 열 변경
- 27
레이아웃 문제 : 중앙에 두 개의 고정 된 열
- 28
사이드 바 메뉴의 첫 행 중앙에 맞추기
- 29
SWT에서 중첩 된 합성물의 상단 사이 간격 변경
몇 마디 만하겠습니다