引导程序将标签对准窗体开关的左侧

Question

我当前无法将标签与开关盒左侧对齐。在浏览了各种堆叠的页面和其他网站后，我仍然无法将标签向左对齐。

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

<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，请查看下面的屏幕截图：当前复选框

感谢您抽出时间，Alex

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>

此外，请注意，对齐和定位是两件不同的事情。在这种情况下，您的问题是关于定位。

当我们谈到文本的对齐时，我们通常称为CCD_ 1性质。

.some_text {
text-align: left;
}

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

更新

为了减小标签和开关之间的空间，移除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>

这是的小提琴