ワイドレイアウトのデザイン設定ページ？
私のWebアプリには設定ページがあります。
これはかなり正常です。左側にいくつかの広範なカテゴリがあり、右側のメインセクションにオプション名とオプション値の設定のペアがあります。動作します。
ただし、1920x1080や2560x1440などのフルサイズのPCデスクトップ画面では、右側のセクションに多くの空きスペースがあります。
どういうわけか、水平方向の不動産をより有効に活用する方法はありますか？
ワイドレイアウトでより効果的に機能する、設定画面のデザインが異なるアプリの例はありますか？
「HEADER 2」セクションを「HEADER 1」セクションの右側に移動して、2列に設定してみました。それは大丈夫ですが、視覚的にスキャンして物を見つけるのは良くないと思います。
このシナリオはかなり一般的であり、max-widthがすべての要素が収まる幅に等しいコンテナーブロックを使用して解決されます。
完全な例はBootstrapです。全幅レイアウトには.container-fluidクラスを使用できますが、.containerクラスを使用して幅を制限（および中央揃え）できます。また、さまざまなデザインを作成する必要はありません。現在、ほとんどのサイトは レスポンシブ であり、単に画面の幅に合わせています。
ところで、私はBootstrapを例として挙げています。max-widthプロパティを含んでいる要素に設定する限り、目的に役立つと思うものを何でも使っても問題ありません。
次のようにレイアウトを再設計します。
2列のレイアウトを使用します。右側に設定を表示できます。「ヘッダー」ですでに持っているように、セクションに分割されている可能性があります。
これで左側で、これらの設定を記述できます（セクションごと）。各設定を変更するとどうなるかをユーザーに説明します。
このようにして、余分なスペースが生産的に使用されます。
