响应式复选框将标签与新行对齐答案

【问题标题】：Responsive checkbox align label with new line响应式复选框将标签与新行对齐
【发布时间】：2021-01-09 19:57:13
【问题描述】：

我需要一些有关此复选框样式的帮助，当我调整窗口大小以适应移动设备时，文本标签会换行，而复选框仍停留在原来的位置，我该如何调整框对齐更接近他的标签？提前致谢。

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

【问题讨论】：

你能提供更多代码吗？也许是一些 CSS？
确定，已更新
你可以试试 padding-left: 0!important;在 div class="custom-control"
@sonEtLumiere 你能发布更多的 html 和 CSS 吗？您提供的 HTML 与您的 CSS 完全不相关。
这两个班怎么样？ custom-control-inputcustom-control-label

标签： javascript html css bootstrap-4

【解决方案1】：

您共享的代码和行为不同，您可以查看以下内容：

fiddle 到处玩

这是它在移动屏幕上的样子。

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

【讨论】：

感谢您的回答，但我仍然遇到同样的问题，可能是 wrapper 和 formContent 的 css 问题
@sonEtLumiere wrapper 和 form-content 类都不存在于您共享的 sn-p 中，并且通过一些代码和理解，我想出了一个示例，只是为了向您展示像这样解决问题，因此您可以共享完整的可重新创建代码以便我们查看它，或者您可以将此作为示例并在您的工作中实现。
Manjuboyz 代码已更新，是 Angular 代码，感谢您的帮助
@sonEtLumiere 新的 HTML 代码没有复选框控件，用哪个合适？
您的代码似乎运行良好，但在我的应用程序中无法正常运行，我正在检查，感谢您的帮助

【解决方案2】：

目前的解决方案是使用@media 并限制标签的最大宽度，这与容器的文本对齐：中心兼容

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

【讨论】：