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

Question

最初にこの図のアイデアを示しましょう: 図 (1) この図では、md/lg 画面で進行状況バーが図の下にあり、テキストがその右側にあることがわかります。それ。

図 (2) では、画面サイズが小さい場合、テキストが 2 番目にあり、進行状況バーが最後にあります。

私がやろうとしているのはこのコードです:

リーリー

進行状況バーがあるべき場所を赤くペイントします。

問題は、大きな画面で使用している場合、テキストが大きすぎるため、画像と進行状況バーの間に白いぼやけが生じ、進行状況ラインを押し出すことです。 この画面を見てください:

Answer 1

この「ブートストラップを使用したグリッド システム」 (実際には、これは正確にはグリッド システムではなく、フレックス システムです) を実装する 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) が無効です: タイトルの

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

• その他のマークアップの問題:

  要素内で

  を使用しないでください (またはその逆)。同じ # # 内に複数の段落を入れないでください。 # 要素を使用し、

  タグの使用を避け、
.row を別の .row 子として直接配置しないでください (ラップする必要があります)これは .col にあります)。そして、コードが HMTL 検証に合格していることを確認してください。

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

---