#css #antd
#css #антд
Вопрос:
Нужно изменить ширину границы на половину модального или любого пользовательского пикселя.
Класс antd-modal-header имеет .border-bottom, но изменение ширины приводит к изменению высоты или делает границу жирной, но не размера.
Код :
<Modal title="Add Name">
<p>Some contents...</p>
</Modal>
Вы можете подключиться к нижеприведенному классу, чтобы получить доступ к границе.
.ant-modal .ant-modal-content .ant-modal-header{
border-bottom: 2px solid #e9e9e9;//changing in 2px to 1px is reducing the height
}
Ссылка на CodeSandbox :
https://codesandbox.io/s/antd-modal-border-stackoverflow-kwdmb?file=/index.css
Комментарии:
1. пожалуйста, поместите пример кода здесь, чтобы другие могли понять, что вы хотите сделать.
2. @KuldipKoradia добавил пример кода
3. пожалуйста, проверьте ответ ниже, я думаю, это будет хорошо работать для вас. @Сай Кришнадас
Ответ №1:
пожалуйста, примените эти свойства CSS для достижения того, что вы хотите сделать.
.ant-modal-header {
border-bottom: 2px solid transparent;
position: relative;
}
.ant-modal-header:after {
content: "";
position: absolute;
left: 0;
bottom: 0;
background-color: #e9e9e9;
width: 50%;
height: 2px;
}
Я попробовал это в демо-версии на этом веб-сайте https://ant.design/components/modal /
вот снимок экрана для того, чего вы хотите достичь
Я также попробовал это с вашим кодом CodeSandbox: вот снимок экрана этого.