Bootstrap Grid システムを使用して、大画面で画像と進行状況バーの間のギャップを修正するにはどうすればよいですか?

Question

まず、この図のアイデアを示します。 図 (1) この図では、md/lg 画面で進行状況バーが図の下にあり、テキストがその右側にあることがわかります。 。図 (2) では、画面サイズが小さい場合、テキストが 2 番目に表示され、進行状況バーが最後に表示されます。 「UTF-8」

P粉518799557 · Answer

この「ブートストラップを使用したグリッドシステム」 (実際には、これは正確にはグリッドシステムではなく、フレックスシステムです) を実装する 1 つの方法は、プログレスバーをコード内に 2 回配置することです (画像内に 1 回、テキストの後に 1 回)。 ) を表示/非表示にするには、表示ユーティリティクラス (v4 Documentation、v5 Documentation) を使用します。

画像の下に .d-none.d-md-block があり、テキストの下に .d-block.d-md-nonecode>.# があるはずです。 .## 異なるブレークポイントで切り替えたい場合は、
md を sm または lg に変更します。 この要素のデフォルト表示を「flex」に適用する場合は、
*-block を *-flex クラスに置き換えます。

実際の動作を

ここでご覧ください。

また、(進行状況バーの代わりに) テキストをコピーして、同じ手法を適用することもできます。

コメント:

この手法の主な欠点は、繰り返される要素またはその子孫に対するイベントリスナーの適用/削除が非常に複雑になることです。
ただし、一部のフロントエンドフレームワーク (Vue、React) は、基本的に、イベントを失うことなく、ターゲット要素内でコンテンツをレンダリングし、コントローラーロジックに基づいて DOM 内の異なる場所に配置できる組み込みの「ポータル」コンポーネントを提供します (要素は破壊されませんが、移動されます)。私の知る限り、Angular はこの機能をそのままでは提供していません。ただし、これ用のプラグインがある可能性があります。
これら 3 つの要素がすべて同じ親要素の子要素である場合、カスタム CSS を使用してこのレイアウトを実現することもできます。親要素で
display:grid を使用し、grid を定義します。 -template-area (または grid-template-rows および grid-template-columns) 応答します。ただし、これは、そのコンテナの Bootstrap グリッドシステムを放棄し、列幅を応答的に制御するために独自の CSS を作成する必要があることを意味します。
あなたが作成したスケッチからは、画像を上部に固定し、進行状況バーを下部に固定して、モバイル上でテキストをスクロール可能にするかどうかは明らかではありません。これにより、間違いなく問題のあるユーザーエクスペリエンスが作成されます。モバイルデバイスでのユーザーエクスペリエンスを向上させるには、ページ全体をスクロール可能にします。
マークアップ (HTML) が無効です: タイトルの
を途中で閉じ、すべてのレイアウトを閉じていません
代码正确。原则上，您的 IDE 应该为您突出显示这些内容。最有可能的是，如果您提交此代码用于面试/工作申请，您将因不使用 IDE（或不知道如何设置 - 对于雇主而言，它们的意思是相同的）而立即被取消资格。
その他のマークアップの問題: 要素内でを使用しないでください (またはその逆)。同じ # # 内に複数の段落を入れないでください。 # 要素を使用し、タグの使用を避け、 .row を別の .row 子として直接配置しないでください (ラップする必要があります)これは .col にあります)。そして、コードが HMTL 検証に合格していることを確認してください。


 上記の例で言及されているすべてを修正しました。

を途中で閉じ、すべてのレイアウトを閉じていません

`を途中で閉じ、すべてのレイアウトを閉じていません`