Why don't Bootstrap switches appear on the same line as other elements in a div?
P粉221046425
2023-09-02 17:46:52
<p>我有以下代码：</p>
<p>
<pre class="brush:css;toolbar:false;">.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;
}</pre>
<pre class="brush:html;toolbar:false;"><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></pre>
</p>
<p>但是，引导开关不会与汉堡包和标题文本出现在同一行。为什么引导元素没有出现在新行上，如何确保开关出现在右对齐的同一行上？</p>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
By default, the
.form-checkclass appears as ablock, which means that during normal flow it moves to its own line.To create a inline form check, use the
.form-check-inlineclass next to the.form-checkclass.Please refer to https://getbootstrap.com/docs/5.0/forms /checks-radios/#inline