Warum erscheinen Bootstrap-Schalter nicht in derselben Zeile wie andere Elemente in einem Div?
P粉221046425
2023-09-02 17:46:52
<p>我有以下代码：</p>
<p>
<pre class="brush:css;toolbar:false;">.global-wrap {
Anzeige: Flex;
Flexrichtung: Reihe;
align-items: center;
rechtfertigen-Inhalt: Mitte;
}
.Header {
Breite: 1024px;
Hintergrundfarbe: lila;
Polsterung: 7px;
Rand: 0;
}
div {
Überlauf versteckt;
Leerraum: nowrap;
}
.Inhaltssvg {
Höhe: 25px;
Breite: 25px;
vertikal ausrichten: Mitte;
}
.contents .title {
Farbe weiß;
Rand: 0;
Schriftgröße: 16px;
vertikal ausrichten: Mitte;
Rand links: 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= „anonym“>
</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">Titel</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-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
默认情况下，
.form-check类显示为块，这意味着在常规流程中它会移动到自己的行。要创建内联表单检查，请在
.form-check类旁边使用.form-check-inline类。请参阅https://getbootstrap.com/docs/5.0/forms /checks-radios/#inline