英文:
Why does bootstrap switch not appear in same line as other elements in the div
问题
以下是翻译好的代码部分：
我有以下代码：
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.global-wrap {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.header {
width: 1024px;
background-color: purple;
padding: 7px;
margin: 0;
}
div {
overflow: hidden;
white-space: nowrap;
}
.contents svg {
height: 25px;
width: 25px;
vertical-align: middle;
}
.contents .title {
color: white;
margin: 0;
font-size: 16px;
vertical-align: middle;
margin-left: 15px;
}
.contents .switch {
align-content: right;
}
<!-- language: lang-html -->
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<div class="global-wrap">
<div class="header">
<div class="contents">
<div class="form-inline">
<div class="form-group">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="white" class="bi bi-list" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
</svg>
<span class="title">Title</span>
<span class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
<label class="form-check-label" for="flexSwitchCheckDefault">Text</label>
</span>
</div>
</div>
</div>
</div>
</div>
<!-- end snippet -->
然而，Bootstrap开关未出现在与汉堡包和Title Text相同的行上。为什么Bootstrap元素没有出现在新行上，如何确保开关出现在右对齐的同一行上？
英文:
I have the code below:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.global-wrap {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.header {
width: 1024px;
background-color: purple;
padding: 7px;
margin: 0;
}
div {
overflow: hidden;
white-space: nowrap;
}
.contents svg {
height: 25px;
width: 25px;
vertical-align: middle;
}
.contents .title {
color: white;
margin: 0;
font-size: 16px;
vertical-align: middle;
margin-left: 15px;
}
.contents .switch {
align-content: right;
}
<!-- language: lang-html -->
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<div class="global-wrap">
<div class="header">
<div class="contents">
<div class="form-inline">
<div class="form-group">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="white" class="bi bi-list" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
</svg>
<span class="title">Title</span>
<span class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
<label class="form-check-label" for="flexSwitchCheckDefault">Text</label>
</span>
</div>
</div>
</div>
</div>
</div>
<!-- end snippet -->
However, the bootstrap switch does not appear on the same line as the hamburger and Title Text. Why doesn't bootstrap element appear on a new line and how can I make sure that the switch appears on the same line being right aligned?
答案1
得分: 1
你需要将 d-inline-flex 类添加到 form-check 类中。同时，将 position-absolute 类添加到 form-check 类，将 position-relative 类添加到其父元素。最后，添加以下 CSS 以将开关对齐到右侧：
.form-check.form-switch {
right: 0px;
}
请查看下面的代码片段。
英文:
You need to add the d-inline-flex class to the form-check class. Also, add the position-absolute class to the form-check class and the position-relative class to its parent. Finally, add the following CSS to align the switch right:
.form-check.form-switch {
right: 0px;
}
See the snippet below.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.global-wrap {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.header {
width: 1024px;
background-color: purple;
padding: 7px;
margin: 0;
}
div {
overflow: hidden;
white-space: nowrap;
}
.contents svg {
height: 25px;
width: 25px;
vertical-align: middle;
}
.contents .title {
color: white;
margin: 0;
font-size: 16px;
vertical-align: middle;
margin-left: 15px;
}
.contents .switch {
align-content: right;
}
.form-check.form-switch {
right: 0px;
}
<!-- language: lang-html -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="global-wrap">
<div class="header">
<div class="contents">
<div class="form-inline">
<div class="form-group d-flex align-items-center position-relative">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="white" class="bi bi-list" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
</svg>
<span class="title">Title</span>
<span class="form-check form-switch d-inline-flex position-absolute">
<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
<label class="form-check-label" for="flexSwitchCheckDefault">Text</label>
</span>
</div>
</div>
</div>
</div>
</div>
<!-- end snippet -->
答案2
得分: 1
默认情况下，.form-check 类被显示为 block，这意味着在常规流中，它会移到自己的一行。
要创建一个内联表单检查，可以在.form-check 类旁边使用.form-check-inline 类。
详见：https://getbootstrap.com/docs/5.0/forms/checks-radios/#inline
<span class="form-check form-check-inline ...">
...
</span>
英文:
By default the .form-check class is displayed as a block, which means in regular flow it moves to its own line.
To create an inline form check, use the .form-check-inline class along side the .form-check class.
See https://getbootstrap.com/docs/5.0/forms/checks-radios/#inline
<span class="form-check form-check-inline ...">
...
</span>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论