ホームページ  >  に質問  >  本文

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

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

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

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

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

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

リーリー

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

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

###前もって感謝します! !

P粉214089349P粉214089349374日前648

全員に返信(2)返信します

  • P粉186897465

    P粉1868974652023-09-11 17:55:06

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

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

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

    返事
    0
  • P粉176151589

    P粉1761515892023-09-11 12:09:49

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

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

    リーリー

    返事
    0
  • キャンセル返事