blazor 基于屏幕尺寸的条件格式

Question

我制作了 3 个按钮，放在图片上（右侧）。当屏幕较小时，按钮不遵循布局，因此它们会覆盖整个图片。 我怎样才能让它们变小，或者最好是在屏幕很小的时候跟踪图片？

.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;
}

@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>

Answer 1

也许我误解了你在寻找什么，但我认为你最好的选择是一个CSS媒体查询，看起来像这样

/* On screens that are 992px or less */
@media screen and (max-width: 992px) {
  .containerHome {
    display: flex;
    flex-direction: row-reverse
  }
  .containerHome div.FloatingTop {
     position: relative;
     width: 100%;
  }
}

这里的目标是将 div 和图像反向堆叠。 可能需要更多调整，因为我看不到你的类的 CSS。