Bootstrap スイッチが div 内の他の要素と同じ行に表示されないのはなぜですか?
P粉221046425
2023-09-02 17:46:52
<p>我有以下代：</p>
<p>
<pre class="brush:css;toolbar:false;">.global-wrap {
ディスプレイ: フレックス;
フレックス方向: 行;
整列項目: 中央;
コンテンツの位置揃え: 中央;
}
.header {
幅: 1024ピクセル;
背景色: 紫;
パディング: 7px;
マージン: 0;
}
ディビジョン {
オーバーフロー: 非表示;
ホワイトスペース: ナラップ;
}
.contents svg {
高さ: 25px;
幅: 25px;
垂直配置: 中央;
}
.contents .title {
色: 白;
マージン: 0;
フォントサイズ: 16px;
垂直配置: 中央;
左マージン: 15px;
}
.contents .switch {
コンテンツの整列: 右;
}</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= 「匿名」＞
</head>
<div class="グローバルラップ">
<div class="ヘッダー">
<div class="コンテンツ">
<div class="フォームインライン">
<div class="フォームグループ">
<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">タイトル</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">テキスト</label>
</span>
</div>
</div>
</div>
</div>
</div></pre>
</p>
<p>しかし、ガイドエレメントは、パッケージやブックと同じ行に現れることはありません。新しい行にどのようなエレメントが現れない場合、どのようにして正しい行の同じ行に現れるかを確認できますか?</p>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
デフォルトでは、
.form-checkクラスはblockとして表示されます。これは、通常のフロー中に独自の行に移動することを意味します。インライン フォーム チェックを作成するには、.form-check
クラスの隣にある.form-check-inlineクラスを使用します。https://getbootstrap.com/docs/5.0/forms /checks-radios/#inline を参照してください。 リーリー