問題タブ [grid-system]

Bootstrap 3 の 3 列レイアウトで列を不適切にラップする IE7 に苦労しています。

私のグリッドシステムは、IE8 を含む他のすべてのブラウザーで、私が望むように動作します (小さいデバイスを反映する解像度の場合はスタックします)。IE8 から IE7 に失われているサポートが原因で、新しい行の列の 9+ 位置にコンテンツの一部を含む列が表示される IE7 で正しくラップされない原因を突き止めたいと思います.

次のように表示されます。

解決

Boostrap 3 は、一貫した構造を実現するために < style = "width:100%;"> を使用しながら、各列要素で padding-left/padding-right を使用します。

IE7 はこのパディング スペースを適切にレンダリングせず、代わりに他のブラウザーがスペースをマージンするようにレンダリングします。つまり、親コンテナーの幅が 960px の場合、子コンテナーの幅と追加されたマージンの合計は 960 未満でなければなりません。本質的に (960/3)!=((320+マージン)*3)。

この問題を克服するために、各列を固定幅のコンテナーにラップしました。

4 つのcol-sm-3列を持つ行があります。この行の中央にテキストを配置する必要があります。つまり、テキストは 2 列目と 3 列目にまたがる必要があります。

これが私のブートプライです

ここにいくつかのコードがあります：

プラス：明確にするために、テキストを同じ行に重ねる必要があります。

次のような 2x2 形式の 1 つの大きな画像と 4 つの小さな画像が必要です。

私の最初の考えは、すべてを一列に収納することでした。次に、2 つの列を作成し、2 番目の列で 2 つの行と 2 つの列を作成して、1x1 と 2x2 の効果を作成します。

ただし、これは可能ではないようです。または、正しく実行していないだけですか?

私のスタイルシート全体で への呼び出しがspanあり、サイト全体で使用される多数のモジュールの幅を制御するために Susy の mixin を使用しています。

特定のブレークポイントでグリッドのガター幅を変更する必要があります。Foundation で使用されているような従来のグリッド システムでは、必要なのは次のようなメディア クエリだけです (要素にクラスを使用したと仮定します)。

Susy を使用して同じことを行う方法がわかりません。すべてのグリッド スタイルが mixin を介して提供されるようになったため、スパンをターゲットにするための明確なフックがなくなりました。

使用した場所ごとに個別のブレークポイントを追加することなく、ブレークポイントでガター幅を切り替えるにはどうすればよいspanですか?

Susy のドキュメントから、答えは次のようなものを追加することのようです。

しかし、これをすべてのモジュールで繰り返すと、多くの重複があるように思えます。

もちろん、この問題はスージーに限ったことではありません。Compas の Vertical Rhythm を使用しても同じ問題が発生します。ブレークポイントでリズムを変更する必要があるとすぐに、唯一のオプションは、垂直リズムの機能が使用されるすべてのポイントでブレークポイントの変更を明示的に宣言することです。

水平レイアウトと垂直リズムのどちらの場合でも、一元化された変更がモジュール全体に伝播し、重複したメディア クエリの拡散を回避できるようにするために、抽象化のレイヤーが必要なようです。

はっきりさせておきたいのですが、私は決してどちらのツールキットも批判していません。それらを使用する最良の方法を探しているだけです。

だから私はどこでも答えを探しましたが、何も見つかりませんでした。私がやろうとしている方法が正しい方法ではないためだと思いますが、確認したいだけです。

Web ゲーム (HTML、JS、CSS) 用のインタラクティブ グリッドを作成しようとしています。ホバー/クリックですべてのセルが塗りつぶされます。通常の正方形のグリッドと三角形のグリッドの両方が必要です。さまざまな画面サイズに合わせて適切にスケーリングできるように、ベクターベースにしたいと考えています。最も簡単な方法は、パターンを作成して長方形に塗りつぶすことだと思いました。これは私がこれまでに持っているコードです:

正方形の場合、三角グリッドの場合は次のようになります。

それらは必要なグリッドを生成しますが、各セルを個別にターゲットにする方法がわかりません。これに関する情報が見つからなかったので推測していますが、それは不可能であり、使用する以外の他の解決策を使用する必要があります。何か案は？

注: これをグラフィック デザインに投稿しましたが、投稿した直後に、こちらの方が適切かもしれないことに気付きました。相互投稿をお詫びします。