У меня есть несколько столбцов .col-xs-3 и .col-xs-9, которые должны идеально подходить друг к другу. Они выполняются на рабочем столе, даже с медиа-запросами размером от 300 пикселей и ниже, но когда я просматриваю страницу на реальном мобильном устройстве (включая последние модели iPhone), столбцы переносятся.
Вы можете посмотреть мою страницу здесь: https://affordable -healthcare-plans.org / p / signup-4.php
Как это выглядит на десктопах при небольших медиазапросах (правильно)
Как это выглядит на мобильном телефоне (неверно)
Что я пробовал до сих пор
Я начал с обходного пути, когда я отключаю flex-wrap: wrap в строках, но это действительно не требуется, поскольку размеры начальной загрузки должны точно соответствовать.
EDIT
Я мог бы сослаться на источник, но моя проблема главным образом в том, что я использую загрузчик с каким-то нестандартным CSS, и я не знаю, откуда возникла проблема. Выглядит хорошо для меня на старых моделях.
Некоторые из моих фрагментов:
.form-contain .col-md-6 .row {
display: flex;
flex-wrap: wrap;
width: 100%;
align-items: center;
}
.row > label {
text-align: right;
white-space: nowrap;
position: relative;
left: -15px;
display: flex;
justify-content: flex-end;
}
Добавление white-space: nowrap также не приводит к тому, что метки и поля становятся встроенными, и это почти всегда работает.