Bootstrap-vue小型移动设备上columns重叠问题的解决方案问询

问题描述 #

我们发现布局在部分移动设备上会出现重叠问题，问题效果截图如下：

出现问题的网格部分代码：

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

问题表现：无论两个BCol容器的cols属性设置为何值，包含图片和文字的第一个列都会占用固定最小宽度，导致导航元素与其重叠。屏幕左侧存在可左移布局、腾出空间的空白区域，但现有布局未利用该空间。

解决方案 #

该问题可通过左移布局或截断文字的方式修复，不属于无法避免的已知问题，具体可按以下方案操作：

方案1：左移布局利用左侧空白（优先推荐）

重叠的核心原因是第一个列内部元素的左侧边距占用了左侧空白区域，挤压了内容可用宽度，只需调整边距为响应式规则即可：

• 将第一个BCol下第一个div的m-10类替换为ms-0 me-10 my-10，移动端下取消左侧边距
• 将Logo组件的m-20类替换为ms-0 me-20 my-20，同步取消移动端下的左侧边距
  调整后可直接复用左侧空白空间，无需改动原有内容逻辑，即可避免挤压右侧导航栏。

方案2：文字截断适配

如果需要保留原有边距设置，可对文字组件做截断处理，强制内容不超出列分配宽度：
给Strapline组件添加text-truncate类，同时设置最大宽度限制，示例如下：

<Strapline class="d-inline-block text-truncate" style="max-width: 120px;" />

可根据实际布局需求，针对不同屏幕宽度设置对应的max-width阈值，适配不同设备。

补充优化

当前BCol的cols属性不生效的原因是内部内容溢出了容器宽度，可给第一个BCol添加overflow-hidden类，强制内容不超出列的分配宽度，从根源避免溢出挤压相邻列。

内容的提问来源于stack exchange，提问作者Bob Tway