Блог

Нас предупредили о том, что наш макет вызывает перекрытия на некоторых мобильных устройствах. Это та часть сетки, которая вызывает проблемы:

 lt;FluidContainergt;  lt;BRowgt;  lt;BCol cols="8" lg="4"gt;  lt;div class="float-left d-flex m-10"gt;  lt;router-link to="/" class="text-decoration-none"gt;  lt;div class="d-flex align-items-center"gt;  lt;!-- this is an image --gt;  lt;Logo class="d-inline-block align-top m-20" /gt;  lt;!-- this is some text --gt;  lt;Strapline class="d-inline-block" /gt;   lt;/divgt;  lt;/router-linkgt;  lt;/divgt;  lt;/BColgt;  lt;BCol cols="4" lg="8" class="d-flex"gt;  lt;div class="d-flex align-items-center w-100 justify-content-end"gt;  lt;BRow class="w-100"gt;  lt;NavBarToggle  v-if="displayMobileNavigationToggle"  :navbarCollapseId="navbarCollapseId"  v-on:click.native="navbarToggleClicked"  class="d-md-block d-lg-none"  /gt;  lt;/BRowgt;  lt;/divgt;  lt;/BColgt;  lt;/BRowgt; lt;/FluidContainergt;  

Что происходит, так это то, что независимо от значения «cols» в двух контейнерах BCol, первый столбец с изображением и текстом занимает минимальную ширину, а элемент навигации перекрывает его. В левой части экрана есть место, чтобы сдвинуть вещи влево и потенциально освободить место, но макет его не использует.

Есть ли способ либо сдвинуть что-то влево, либо потенциально обрезать текст, чтобы исправить это? Или это проблема, с которой нам просто приходится жить?

С помощью flex box создайте два раздела, один для текста и один для значка навигации. Также уменьшите размер шрифта вашего текста и используйте отрицательное значение для полей, чтобы разделить их.