Pourquoi les commutateurs Bootstrap n'apparaissent-ils pas sur la même ligne que les autres éléments d'un div ?
P粉221046425
2023-09-02 17:46:52
<p>我有以下代码：</p>
<p>
<pre class="brush:css;toolbar:false;">.global-wrap {
affichage : flexible ;
direction flexible : rangée ;
align-items : centre ;
justifier-contenu : centre ;
}
.entête {
largeur : 1024px ;
couleur de fond : violet ;
remplissage : 7px ;
marge : 0 ;
}
div{
débordement caché;
espace blanc : nowrap ;
}
.contenu svg {
hauteur : 25px ;
largeur : 25 px ;
alignement vertical : milieu ;
}
.contenu .titre {
Couleur blanche;
marge : 0 ;
taille de police : 16 px ;
alignement vertical : milieu ;
marge gauche : 15 px ;
}
.contents .switch {
align-content : à droite ;
}</pré>
<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= "anonyme">
≪/tête>
<div class="global-wrap">
<div class="en-tête">
<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">Titre</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>
</envergure>
</div>
</div>
</div>
</div>
</div></pre>
</p>
<p>上，如何确保开关出现在右对齐的同一行上？</p>
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Par défaut,
.form-check类显示为块, ce qui signifie qu'il se déplace vers sa propre ligne pendant le flux normal.Pour créer une vérification de formulaire en ligne , faites-le dans la
.form-check类旁边使用.form-check-inlineclasse.Veuillez vous référer à https://getbootstrap.com/docs/5.0/forms /checks-radios/#inline