問題タブ [grid-system]

react と material-ui を使用してマテリアル デザイン アプリを開発するためのレスポンシブ グリッド システムを実装する方法を探しています。this
をReact-Bootstrap持っていますが、Material-UI に似たものは見つかりませんでした。GridListは便利ですが、まったく同じではありません。そのための解決策はありますか？

行の 12 列すべてを埋める必要がありますか?

例 1 - 合計 12 行から 2 列のみが宣言されます。

例 2 - 未使用の列も宣言されています。

ブラウザが2つの例をさまざまな方法でスケーリングすることは可能ですか? 私は良い習慣は例2だと思う傾向があります。

私の webapp プロジェクトでは、Bootstrap をフロント エンド フレームとして使用しています。そして、私にとって紛らわしい問題が1つあります。HTML コードは次のとおりです。

しかし、結果は次のとおりです。

紛らわしい点は、すべての列幅の合計がちょうど 12 であることです。これは、グリッド システムのルールに従います。しかし、これらのコンポーネントを 1 行に配置できなかったのはなぜでしょうか?

ブートストラップ グリッド システムは、テーブルの必要性に取って代わりましたか? つまり、次のようなテーブルで行を 3 つの部分に分割できます。

また、次のようなグリッドを使用して:

どういうわけか、グリッドとテーブルを逆に使用できるようです。では、navbar の特定の位置に何かを配置する必要がある場合、どのアプローチを使用すればよいでしょうか? どんな助けでも大歓迎です。

レスポンシブ グリッドに画像のリストを表示しようとしています。angular と bootstrap を使用しており、画像は flickr API を介して動的に読み込まれます。とにかく、これは画像を表示するコード スニペットです。

これが結果です

ご覧のとおり、垂直方向の画像の左側に空の列があります。これはブートストラップの通常の動作だと思いますが、ブートストラップにそのスペースも埋めるように指示する方法はありますか?

お気づきかもしれませんが、私は CSS の天才ではありません。

前もって感謝します

ナビゲーションバーとグリッドシステムについて質問があります。

Q1.グリッドシステム

左右に高さ 100% のナビゲーション バーを 2 つ作成しましたが、中央のテキストが左側にあるように見え、左側のナビゲーション バーが重なっています。

ここに私のコードへのリンクがあります。

ここにリンクの説明を入力

写真は私が欲しいものを示しています。 私が実際に欲しいもの。

Q2. top と both side で同じテキスト ブロック サイズを作成するにはどうすればよいですか?

フルスクリーンでは同じサイズですが、どうすればいいのか知りたいです。どうもありがとうございました。

いくつかの異なるサイズのボックスをグリッドに並べて反応させる簡単な方法はありますか?

石積みの使用について聞いたことがありますが、もう少しシンプルなものを探しています. これは長さ 800px で、高さと幅の両方が 200px で割り切れます。

まず第一に写真：

これはgetmdl.ioの画面です。この振る舞いが理解できません。悲しいことに、それぞれの幅が行幅の 1/3 に等しい行に正確に3 列が必要です。ただし、一部の画面解像度では、列の幅が行幅の半分に等しくなります。これは、メディア クエリに基づく CSS 命令に由来するものであり、仕様によるものと思われます。

私の質問は、この動作を防ぐことはできますか? そうでない場合、その行動の理由は何ですか。

PS私はブートストラップから来ましたが、この問題はありませんでした。

私は Bootstrap を初めて使用し、グリッド システムがどのように機能するかを理解するのに少し問題があります。最初に、サイドバーのあるページの次のコードがあります。

次のCSSを使用：

大きな画面では問題なく動作しますが、小さな画面サイズでは次の問題があります。

サイドバーのテキストがサイドバー領域に合わせてサイズ変更されない理由について、説明をいただければ幸いです。助けてくれてありがとう。