問題タブ [neat]

フルサイズのレイアウト (12 列のグリッド) で 3 つの要素を持つヘッダーがあります。

左 = ロゴ (3 列)、中央 = nav (6 列)、右 = ソーシャル メディア (3 列)

小さいサイズ (4 列のグリッド) で、「ソーシャル メディア」を表示しないように設定しました。「ロゴ」と「ナビゲーション」は両方とも 2 列です。これらは水平方向に整列されていません。2 番目の要素は最初の要素の下に表示され、両方とも 2 つの列にまたがっていますが、互いに隣り合っていません。フローティング、クリアリング、その他すべてのジャズを試しましたが、喜びはありませんでした。

HTMLは次のとおりです。

これがscssです：

これに関するどんな助けも素晴らしいでしょう。

よろしくお願いします、アレックス

私はバーボンニートを使用して、デスクトップの最初のレイアウトをうまく機能させてきました。

しかし、私はモバイルから始めて、自分のやり方で作業を進めて、モバイル ファースト バージョンを作成したいと考えています。デフォルトのグリッドは 12 列で、モバイルでは通常 4 のグリッドを使用します。グリッドを 4 に変更して 12 に拡大しようとしましたが、うまくいきませんでした。

標準のデスクトップ レイアウトを作成し、次にモバイル メディア クエリを各 CSS セレクターに配置し、モバイル バージョンから開始して方法を構築する以外に、モバイルを最初に行うためのより良い方法はありますか?

Bourbon Neat を ie8 で動作させるという不幸な仕事があります。ソートボットのドキュメントによると、これには Selectivizr を使用します。私は Selectivizr の指示に従いましたが、ie8 でテストしても何も変わりません。また、フォールバック css が必要な場合もわかりません。アイデアや解決策はありますか？最も感謝しています！

グリッドに影響を与えずに .container にパディングを追加しようとしています。私が考えることができる最良の例は、コンテンツが .container の側面にぶつからないようにすることです。なぜなら、デザインに青い背景があり、.container が白い場合、左右にパディングが必要だからです。 . 問題を示すために、ここにサンプルページを簡単に作成しました。

私は基本的に、1000px のコンテナを 20px のガターで作成しようとしており、それぞれが 65px を占有します。ただし、グリッドの外側ですが、.container の内側では、左右のパディングも 20px にしたいと考えています。これが助けになるか悪化するかはわかりませんが、これはグリッド用のCalcaワークアウトシートです

バーボン ニート グリッドをテストし、実際にモバイル ファースト アプローチ グリッドを試してみます。私の構造は次のようになります：

私のグリッド設定:

私のscss：

たとえば、私はブレークポイントに応じて背景色を変更し、PC 画面では、色はモバイルのものによって上書きされます..しかし、列番号は正しいものです...奇妙です。

手伝ってくれてありがとう

EDIT1: モバイルの設定を適用するには、ブレークポイントを指定する必要があります。

しかし、ページの内部部分で問題が発生します。コンテナを指定する必要がありますか、それとも複数の列にまたがるミックスインで十分ですか?

最後の子の 0 マージンがどのように入るのか疑問に思っています。

私が持っている：

本文は最大幅で中央に配置されます - .content-main と aside の両方が正しい幅を取得し:last-child { margin-right: 0;}ていますが、どちらも想定されている幅を取得していません。体には他のものがありますが、それは彼らが持っている唯一の親です.

明らかに、私は正しいことをしていませんが、幅がまったく得られているという事実は、すべてが正しく @import されていることを示しているようです。

感謝を込めて --

このかなり苛立たしいエラーが発生しました-私のコードが

ただし、メディアブレークポイントを追加しようとすると、配置は本来あるべきものになります。

}

最後の div の配置が何らかの理由で外れます (約 1.5 列が多すぎます) $tablet ブレークポイント (768px) に到達すると問題なく列がドロップされるように見えますが、これは大画面で発生します、 9)

http://neat.bourbon.io/examples/の例は、サイズ変更時に列が全幅にドロップする方法に対応していないためイライラします (特に複数の行がある例)。2 つの列を行にラップしようとしました。ラッパーを使用してラッパーにシフトを適用しますが、これは代わりに2つの列を一緒に圧迫しているようです。

私は Bourbon Neat で Web サイトを構築しており、次のような列を配置する必要があります。

コードの書き方に関するアイデアはありますか?

私はもう試した

ただし、すべての列の高さは同じです。そして、私は異なる高さが必要です。

前もって感謝します。