Blazor基于屏幕尺寸的条件格式化：按钮响应式布局问题

问题描述 #

我在图片右侧放置了3个圆形按钮，当屏幕尺寸较小时，按钮布局错乱并覆盖图片。请问如何实现小屏幕下按钮缩小，或优先让按钮排列到图片下方？

原代码 #

CSS代码

.btn-circle {
    height: 125px;
    width: 125px;
    border-radius: 50%;
    padding: 4px;
    margin-right: 7px;
    margin-left: 7px;
}


.img-circle {
    border-radius: 50%;
    height: 125px;
    width: 125px;
}

Razor代码

@page "/"

<PageTitle>Accueil</PageTitle>
<div class="containerHome">
    <div class="d-flex flex-row-reverse FloatingTop">
        <a class="btn btn-circle mr-3" href="https://trudelauto.com/" >
            <img class="img-circle" src="/Images/Partners/Trudel.png" width="100 px">
        </a>
        <a class="btn btn-circle mr-3" href="https://www.jeunesnaturalistes.org/" >
            <img class="img-circle" src="/Images/Partners/jeunesNaturalistes.jpg" width="100 px">
        </a>
        <a class="btn btn-circle mr-3" href="https://amos-harricana.ca/visiter/" >
            <img class="img-circle" src="/Images/Partners/tourismeHarricana.png" width="100 px">
        </a>
    </div>  
    <img src="/Images/home.png" alt="Labyrinthe des insectes" width="100%" />
</div>

解决方案 #

方案1：小屏幕下将按钮移至图片下方 #

利用Bootstrap的响应式布局和媒体查询，在小屏幕时将按钮容器改为垂直布局，彻底避免覆盖问题：

修改后的Razor代码

@page "/"

<PageTitle>Accueil</PageTitle>
<div class="containerHome">
    <!-- 添加flex-wrap允许换行，同时增加垂直间距避免拥挤 -->
    <div class="d-flex flex-row-reverse flex-wrap FloatingTop">
        <a class="btn btn-circle mr-3 mb-3" href="https://trudelauto.com/" >
            <img class="img-circle" src="/Images/Partners/Trudel.png" width="100 px">
        </a>
        <a class="btn btn-circle mr-3 mb-3" href="https://www.jeunesnaturalistes.org/" >
            <img class="img-circle" src="/Images/Partners/jeunesNaturalistes.jpg" width="100 px">
        </a>
        <a class="btn btn-circle mr-3 mb-3" href="https://amos-harricana.ca/visiter/" >
            <img class="img-circle" src="/Images/Partners/tourismeHarricana.png" width="100 px">
        </a>
    </div>  
    <img src="/Images/home.png" alt="Labyrinthe des insectes" width="100%" />
</div>

修改后的CSS代码

.btn-circle {
    height: 125px;
    width: 125px;
    border-radius: 50%;
    padding: 4px;
    margin-right: 7px;
    margin-left: 7px;
}

.img-circle {
    border-radius: 50%;
    height: 125px;
    width: 125px;
}

/* 针对小屏幕（≤576px）切换为垂直居中布局 */
@media (max-width: 576px) {
    .FloatingTop {
        flex-direction: column !important;
        align-items: center;
    }
}

方案2：小屏幕下缩小按钮尺寸 #

通过媒体查询，在小屏幕时按比例缩小按钮和内部图片的尺寸，确保它们不会超出容器或覆盖图片：

修改后的CSS代码

.btn-circle {
    height: 125px;
    width: 125px;
    border-radius: 50%;
    padding: 4px;
    margin-right: 7px;
    margin-left: 7px;
}

.img-circle {
    border-radius: 50%;
    height: 125px;
    width: 125px;
}

/* 小屏幕下按比例缩小按钮 */
@media (max-width: 576px) {
    .btn-circle {
        height: 80px;
        width: 80px;
        margin-right: 4px;
        margin-left: 4px;
    }
    .img-circle {
        height: 80px;
        width: 80px;
    }
}

Razor代码无需改动，保持原结构即可。

可选：结合两种方案 #

如果需要更灵活的适配逻辑，可以设置多断点规则：比如在极小屏幕（≤400px）下移按钮，在小屏幕（401px-576px）缩小按钮，只需调整媒体查询的断点值即可。

内容的提问来源于stack exchange，提问作者rose-marie paradis