Mengapa suis Bootstrap tidak muncul pada baris yang sama dengan elemen lain dalam div?
P粉221046425
2023-09-02 17:46:52
<p>我有以下代码：</p>
<p>
<pre class="brush:css;toolbar:false;">.global-wrap {
paparan: flex;
flex-direction: baris;
align-item: tengah;
justify-content: pusat;
}
.kepala {
lebar: 1024px;
warna latar belakang: ungu;
padding: 7px;
margin: 0;
}
div {
limpahan: tersembunyi;
white-space: nowrap;
}
.contents svg {
ketinggian: 25px;
lebar: 25px;
vertical-align: tengah;
}
.contents .title {
warna: putih;
margin: 0;
saiz fon: 16px;
vertical-align: tengah;
jidar-kiri: 15px;
}
.contents .switch {
align-content: kanan;
}</pre>
<pre class="brush:html;toolbar:false;"><head>
<pautan href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztgincoCQyThh" "tanpa nama">
</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-.5j10a.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 .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">Teks</label>
</span>
</div>
</div>
</div>
</div>
</div></pre>
</p>
<p>但是，引导开关不会与汉堡包和标题文本出现在同一行。为什么引导堡包和标题文本出现在同一行。为什么引导岇有索，如何确保开关出现在右对齐的同一行上？</p>
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Secara lalai,
.form-check类显示为块, yang bermaksud ia bergerak ke barisnya sendiri semasa aliran biasa.Untuk membuat semakan borang sebaris, lakukannya dalam
.form-check类旁边使用.form-check-inlinekelas.Sila rujuk https://getbootstrap.com/docs/5.0/forms /checks-radios/#inline