小さな画面へのウェブサイトの応答性について

Question

これは私の最初のウェブサイトで、私のポートフォリオのURLですhttps://sarthak-port.000webhostapp.com/Mportfolio.html 無料のホスティングにwebhostを使用しました。私の問題は私のコードではブートストラップクラスを使用しましたが、あなたは同じことをするためのいくつかのアイデアを提案することができますか？

Answer 1

ちょっと見てみると、「マイ・ワークス」のスペースで、「マイ・プロファイル」のスペースは各エレメントのcol-xs-3クラスだけです。あなたのセクションでは、応答性の問題で再配置したい場合、あなたはおそらく、すべての行で、その後小さな画面幅にあなたはすべての行の4つの4つの要素を持っている必要があり、より大きな画面幅に

class="col-lg-3 col-md-3 col-sm-6 col-xs-12" 

ようにだけ2の要素をこのようにクラスを使用する必要があります最終的に非常に小さな画面では1行に1要素しかありません。すべての要素をcol-xs-3に設定すると、すべての画面で各行に4つの要素が必要になります。 最後のセクションでは、入力フィールドはブートストラップクラスを使用して中間に設定されません。一つの方法は、

col-md-6 col-md-3-offset 

あなたが（再び空にあなたの入力と3つのグリッドセルと6つのグリッドセル+空の3グリッドセル）をセンターにご入力を送ることができるこの方法を用いることであろうエルス あなたはこのTwitter Bootstrap 3: How to center a blockのようなものを使用することができます。 ブートストラップには多くのクラスがありますが、いくつかの掘り出しが必要です。