我目前無法將標簽與開關盒左側對齊。查看各種stackoverflow頁面并瀏覽其他網站后,我仍然無法將我的標簽左對齊。
請在我已洗掉不需要的代碼的片段下方找到:
<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,請看下面的截圖: 當前復選框
謝謝你的時間,亞歷克斯
uj5u.com熱心網友回復:
有了一些 CSS,我們就可以完成這項作業。
.form-switch {
display: flex !important;
flex-direction: row-reverse !important;
justify-content: space-between !important;
}
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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;
}
所以不要混淆對齊和定位。
更新
For reducing the space between the label and the switch,
remove the justify-content
property and add a margin-right
to the label.
.form-switch {
display: flex;
flex-direction: row-reverse;
}
.form-switch label {
margin-right: 50px !important;
}
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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>
Here is a fiddle for it
轉載請註明出處,本文鏈接:https://www.uj5u.com/gongcheng/450680.html