英文:
Changing the order of switch toggle and label in bootstrap 5
问题
在Bootstrap 5中更改开关和标签的顺序。代码中的顺序不会产生任何影响。
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
<label class="form-check-label" for="flexSwitchCheckDefault">首先是开关，然后是标签</label>
</div>
<div class="form-check form-switch">
<label class="form-check-label" for="flexSwitchCheckDefault">首先是标签，然后是开关</label>
<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
</div>
英文:
How to change the order of the switch and the label in bootstrap 5. The order in the code doesn't make a difference.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
<label class="form-check-label" for="flexSwitchCheckDefault">Switch first then label</label>
</div>
<div class="form-check form-switch">
<label class="form-check-label" for="flexSwitchCheckDefault">Label first then switch</label>
<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
</div>
<!-- end snippet -->
答案1
得分: 1
以下是翻译好的部分：
看这里...
查看下面的代码片段。
<!-- 开始代码片段: js 隐藏: false 控制台: true Babel: false -->
<!-- 语言: lang-css -->
.form-check {
position: relative;
width: 200px;
}
.form-check-input {
position: absolute;
right: 0;
}
.form-check-label {
position: absolute;
left: 0;
}
<!-- 语言: lang-html -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
<label class="form-check-label" for="flexSwitchCheckDefault">首先切换，然后是标签</label>
</div>
<div class="form-check form-switch">
<label class="form-check-label" for="flexSwitchCheckDefault">首先标签，然后切换</label>
<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
</div>
<!-- 结束代码片段 -->
请注意，我已经将HTML和CSS代码翻译成中文，但HTML代码中的引用链接保持原样，因为它是一个URL。
英文:
Here you go...
See the snippet below.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.form-check {
position: relative;
width: 200px;
}
.form-check-input {
position: absolute;
right: 0;
}
.form-check-label {
position: absolute;
left: 0;
}
<!-- language: lang-html -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
<label class="form-check-label" for="flexSwitchCheckDefault">Switch first then label</label>
</div>
<div class="form-check form-switch">
<label class="form-check-label" for="flexSwitchCheckDefault">Label first then switch</label>
<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论