Vuetify 버튼 너비 및 패딩 변경

Vuetify 버튼 너비 및 패딩 변경

단추가 크고 카드 너비를 초과함

이건 쉬울 텐데, 카드 안에 있는 버튼을 커스터마이징하는 데 좀 힘들어.왼쪽/오른쪽에 여분의 공간 없이 블랙 테두리가 아이콘을 잘 감싸도록 패딩을 모두 제거하고 싶다.커스텀 css를 추가해봤는데!important그리고 직접적으로 가장 중요한 것은div.btn__content하지만 그건 효과가 없어가능한 한 간단하게 이것을 할 수 있는 아이디어는 없으십니까?

재생성 링크

문제는 이다.min-width의.btnclass. 설정하기0단추가 다음보다 작도록 허용함88px또한 너는 단지 설정해야만 한다.padding의.btn__content로0.

div.btn__content {
  padding: 0;
}

div.card__actions .btn {
  min-width: 0;
}

여기 업데이트된 코드펜이 있다.

최신 버전의 Vuetify(1.2.4 이상)의 경우 다음을 사용하십시오.

/* turn off min-width for all buttons */
.v-btn {
  min-width: 0;
}

최소 너비를 변경해야 함.btn수업과 수업padding-left: 16px의.btn-content.

예: https://codepen.io/anon/pen/zPEyLB

당신은 아마 사용해야만 할 것이다.::v-deep

::v-deep .v-btn {
  padding-left: 12px;
  padding-right: 12px;
}

참조URL: https://stackoverflow.com/questions/47331310/changing-vuetifys-button-width-and-padding