Bootstrap 将标签左对齐到 form-switch

Question

我目前无法将我的标签与开关盒的左侧对齐。查看了各种Whosebug页面，浏览了其他网站，我的标签仍然无法左对齐。

请在下面找到我删除不需要的代码的片段：

 <form method="POST" id="registration-form">
  <div class="form-check form-switch">
     <input class="form-check-input" type="checkbox" id="height" @click='imperialHeight()'>
     <label class="form-check-label" for="bmi">Imperial</label>
 </div>
 <br>
 <div class="form-check form-switch">
     <input class="form-check-input" type="checkbox" id="weight-switch" @click='imperialWeight()'>
     <label for="weight-switch">Imperial</label>
   </div>
</form>

请注意，没有任何关联 CSS。我正在使用 Bootstrap 5，请看下面的截图： Current Checkboxes

感谢您的宝贵时间，亚历克斯

Answer 1

有了一些 CSS，我们可以完成这项工作。

.form-switch {
  display: flex !important;
  flex-direction: row-reverse !important;
  justify-content: space-between !important;
}

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<form>
  <div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
  <label class="form-check-label" for="flexSwitchCheckDefault">Default switch checkbox input</label>
</div>
<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckChecked" checked>
  <label class="form-check-label" for="flexSwitchCheckChecked">Checked switch checkbox input</label>
</div>
<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDisabled" disabled>
  <label class="form-check-label" for="flexSwitchCheckDisabled">Disabled switch checkbox input</label>
</div>
<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckCheckedDisabled" checked disabled>
  <label class="form-check-label" for="flexSwitchCheckCheckedDisabled">Disabled checked switch checkbox input</label>
</div>
</form>

另外，请注意对齐和定位是两个不同的东西。在这种情况下，您的问题是关于定位的。

当我们谈到文本对齐时，我们一般指的是text-align属性.

.some_text {
  text-align: left;
}

所以不要混淆对齐和定位。

更新

为了减少标签和开关之间的space，删除 justify-content 属性并在标签中添加 margin-right。

.form-switch {
  display: flex;
  flex-direction: row-reverse;
}

.form-switch label {
 margin-right: 50px !important;
}

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<form>
  <div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
  <label class="form-check-label" for="flexSwitchCheckDefault">Default switch checkbox input</label>
</div>
<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckChecked" checked>
  <label class="form-check-label" for="flexSwitchCheckChecked">Checked switch checkbox input</label>
</div>
<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDisabled" disabled>
  <label class="form-check-label" for="flexSwitchCheckDisabled">Disabled switch checkbox input</label>
</div>
<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckCheckedDisabled" checked disabled>
  <label class="form-check-label" for="flexSwitchCheckCheckedDisabled">Disabled checked switch checkbox input</label>
</div>
</form>

这是一个fiddle

Bootstrap 将标签左对齐到 form-switch

Bootstrap align label left of form-switch

html

css

checkbox

alignment

更新