Lumore
@Lumore
Front-end developer

Как правильно верстать формы?

Я понимаю что инпуты будут выходить за форму если дать им ширину 100% и еще padding.
В моем случае код такой:
input[type='text'], input[type='email'], input[type='password'], textarea {
        width:  100%;
	background: #fff;
	border: 1px solid #ccc;
	padding: 6px 10px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}

И результат такой:
d72164b67d5b4d96a9195ce7740a88d1.png

А у Twitter Bootstrap тоже самое, но за форму ничего не вылазит:
fd524b3e420247be870b7f0b9bb9091e.png

Что у меня не так? И как это исправить?
  • Вопрос задан
  • 3478 просмотров
Решения вопроса 3
mahabatuly
@mahabatuly
Frontend-бағдарламашы
Салам Это потому что Bootstrap использует border-box
* {
box-sizing:border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
Ответ написан
5angel
@5angel
Фронтенд-лид
Bootstrap использует css-свойство box-sizing со значением border-box, при котором padding не добавляет ширины элементу.

Подробнее можно почитать, например, на хабре.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы