Как сделать чтобы эти элементы нормально работали с bootstrap?

Question

[mustafich]

Вот код как должно работать https://codepen.io/mustafich/pen/gvwbNm
И за того что на сайте стоит bootstrap выглядит коряво ( )
Как сделать чтобы эти элементы нормально работали с bootstrap?

Answer 1

[mustafich]

Надо задать CSS свойство box-sizing: content-box;, так как bootstrap всем элементам задает значение свойства border-box

Answer 2

[Socrates]

посмотреть в инспекторе как бутстрап влияет на элементы и переопределить css.
Либо подключать бутстрап не целиком, а частично, по необходимости.

Answer 3

[Егор Живагин]

Вы уверены, что это из-за бутстрапа?

Comments

[mustafich]

Да при отключение bootstrap.min.css элементы правильно работают а сайт падает Можно ли это исправить ?

[Егор Живагин]

mustafich, сайт падает? Может просто вёрстка едет?)

Смотрите в инспекторе, какие именно стили перекрываются.
bootstrap подключается в коде выше всех остальных css файлов?

[mustafich]

Егор Живагин, Да Верстка едет
bootstrap подключается в коде выше всех остальных css файлов? Да

[Егор Живагин]

mustafich, смотрите инспектор (dev tools) в браузере, ищите стили, которые мешают, и перекрывайте их своими.

[mustafich]

Егор Живагин, Надо задать CSS свойство box-sizing: content-box;, так как bootstrap всем элементам задает значение свойства border-box