ブートストラップのランディング ページ レイアウトの問題 - コンテナが画面サイズに正しく適合しない

Question

私は現在、Bootstrap を使用してランディング ページを作成する練習をしています。ただし、レイアウトの問題に直面しています。コンテナーが適切な画面サイズに適合しません。左右のバランスが崩れて画面が左に傾いてしまいます。

これは問題を示すスクリーンショット (リンク) です: テキスト

さまざまな方法を試しましたが、問題を解決できませんでした。これは、ブートストラップのグリッド システムまたはコンテナーの設定に問題があるのではないかと思われます。

このレイアウトの問題のトラブルシューティングと修正方法を教えてくれる人はいますか?ご提案や洞察をいただければ幸いです。

さらに、関連するコード スニペットをいくつか示します:

リーリー

コンテナの構文、マージン、パディングもチェックしました。しかし、これの何が問題なのか本当にわかりません..

あなたの助けに本当に感謝しています。初心者の私にとってはとても助かります。

＃＃＃前もって感謝します！ ！

Answer 1

コンテナの場所を確認してください。コード スニペットでは、col-xxl-8 クラスでコンテナ クラスを使用します。コンテナーが中央に配置するコンテンツ全体をラップしていること、およびcol-xxl-8 クラスが正しく適用されていることを確認してください。

そして、このような機能セクションについてすべてのコンテナ クラスをチェックする必要があると思います

col-12col-sm-8col-lg-6は画像コンテナに使用され、col-lg-6はテキストコンテナに使用されます。

Answer 2

水平スクロール バーが表示されるのは、function 部分がテキストから 100% を超えてオーバーフローしているためです。 Bootstrap クラス mw-100 を追加することは、CSS で max-width: 100%; を設定することと同じです。

以下のコード スニペットを参照してください。

リーリー