1

На маленьких экранах переносится последняя колонка, на одних устройствах всё работает нужным образом, на некоторых так как показано на скрине. Вот сама разметка:

<div class="container-fluid mt-5">
        <div class="row justify-content-center">
            <div class="col col-12 col-md-10 col-xl-4">
                <div class="row">
                    <div class="col col-1 border border-dark">a</div>
                    <div class="col col-8 border border-dark">a</div>
                    <div class="col col-3 border border-dark">a</div>
                </div>
            </div>
        </div>
    </div>

Скриншот

2 ответа 2

1

вы тестируете через chrome, который автоматически подгоняет разрешение под кажущееся ему правильным увеличение (94% в вашем случае).

Это иногда создает визуальные баги, которых на самом деле нет. Переключитесь на 100%.

Если проблема все же есть то она в border. Он добавляет лишние пиксели, которые, видимо, переносят ваши колонки на некоторых девайсах. (не уверен в кроссплатформенности конкретно этого нюанса в bootstrap и reboot).

Попробуйте поместить внутрь col-* ещё один div и задать border для него. Результат внешне будет тот же, что и сейчас.

div class="container-fluid mt-5">
        <div class="row justify-content-center">
            <div class="col col-12 col-md-10 col-xl-4">
                <div class="row">
                    <div class="col col-1 col_with_outline"><div class="border border-dark">a</div></div>
                    <div class="col col-8 col_with_outline"><div class="border border-dark">a</div></div>
                    <div class="col col-3 col_with_outline"><div class="border border-dark">a</div></div>
                </div>
            </div>
        </div>
    </div>  

Либо используйте вместо border outline

.col_with_outline{ 
    outline: 2px solid #ccc;
}
8
  • 1
    Поставил 100% в хроме и убрал бордер, но на некоторых девайсах так же остался перенос( 11 янв 2020 в 17:50
  • Дайте ссылку на сайт и подскажите какое выставить разрешение чтобы увидеть проблему.
    – adudnik.ru
    11 янв 2020 в 19:21
  • Запущено на локальном сервере( 11 янв 2020 в 21:26
  • В таком случае могу лишь посоветовать через "просмотр кода" в конкретно проблемных разрешениях играться с элементами и искать ошибку.
    – adudnik.ru
    11 янв 2020 в 21:53
  • я разметку точно правильно составляю? 11 янв 2020 в 22:19
1

Нашёл ответ в документации bootstrap, нужно было сделать длину первой колонки col-1, вторую оставить адаптивной (то есть убрать вообще фиксированное значение col-*, длина третьей колонки col-2), соответственно длина второй колонки просто подгоняется, а крайние остаются с изначальными размерами.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.