Bootstrap 3 - Overlapping Content (Clearfix?)

Question

У меня есть проблема в моем HTML (Bootstrap), где на большинстве настольных компьютеров отображается тонкая колонка с тремя колонками, но сжимается/перекрывается на меньших размерах экрана (планшет/мобильный).

Я использую float: left; для элементов нижнего колонтитула - возможно, это связано.

Я могу исправить это с помощью <div class="clearfix"></div> после оскорбительных элементов, но это нарушит расположение трех столбцов на рабочем столе.

Что мне не хватает?

Скриншот:

Пример:

http://www.bootply.com/YRCLoHI7Uw

Answer 1

Дайте строку и ребенок DIVS поплавок: слева. Полагаю, это решает ваш вопрос. Дайте мне знать, если вы этого не хотели.

Answer 2

Существует проблема в вас код

Проблема:

Вы используете px, давая width, padding и margin к <address> и .box.

Решение:

Вы должны всегда использования % или em, делая адаптивный дизайн. % за width и em за padding и margin, поскольку % и em будут расширяться и сокращаться согласно width.