響應復選框將 label 與新行對齊

Question

我需要一些關於此復選框樣式的幫助，當我調整 window 的大小時以適應移動設備時，文本 label 換行，而復選框只是靜止在他原來的 position 中，我怎樣才能調整框對齊更接近他的label？ 提前致謝。

 <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" id="customCheck1" (change)="termsAndConditions($event.target)"> <label class="custom-control-label" for="customCheck1">Acepto los <a href="https://docs.google.com/document/d/demodemodemo" target="_blank"><b>Términos y condiciones</b></a></label> </div>

集裝箱CSS

 .wrapper { display: flex; align-items: center; flex-direction: column; justify-content: center; width: 100%; padding: 20px; } #formContent { -webkit-border-radius: 10px 10px 10px 10px; border-radius: 10px 10px 10px 10px; background: #fff; width: 90%; max-width: 450px; position: relative; -webkit-box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3); box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3); text-align: center; }

 <div class="wrapper"> <div id="formContent"> <h2 style="cursor: pointer" routerLink="/login" routerLinkActive="active"> Iniciar sesión </h2> <h2 style="cursor: pointer" routerLink="/signup" routerLinkActive="active"> Crear cuenta </h2> <router-outlet></router-outlet> </div> </div>

Answer 1

您共享的代碼和行為不同，您可以查看以下內容：

擺弄小提琴

這是它在移動屏幕上的外觀。

 .custom-checkbox { display: flex; align-items: center; justify-content: center; width: 100%; padding: 20px; border: 1px solid red; }

 <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" id="customCheck1" (change)="termsAndConditions($event.target)"> <label class="custom-control-label" for="customCheck1">Acepto los <a href="https://docs.google.com/document/d/demodemodemo" target="_blank"><b>Términos y condiciones</b></a></label> </div>

Answer 2

目前的解決方案是使用@media 並將最大寬度限制為 label，這與容器的 text-align: center 兼容

 @media screen and (max-width: 345px) {.custom-control-label{ max-width: 120px; } }