問題タブ [skeleton-css-boilerplate]

Skeleton Framework (http://getskeleton.com) を使用しており、背景色と白いコンテナ ページを持つページが必要です。

.container {padding:0 10px;}小さなデバイスのウィンドウのサイズを変更するときにレイアウトの中断を追加すると。ここで非常に明白な何かが欠けていることを願っています。レスポンシブ デザインを壊さずにコンテナにパディングを追加するにはどうすればよいですか?

私はコードイグナイターで getskeleton.com からスケルトン CSS を読み込もうとしています。ヘッダー (HTML を開く、CSS へのリンク、ページのヘッダー) を 1 つのビューに、ナビゲーション バーを別のビューに分離するテンプレート システムを使用しています。 3 番目のビューのメイン コンテンツ、4 番目のビューのサイド バー、および 5 番目のビューのフッターと終了 HTML をコントローラーの変数に追加して、ビューをロードしようとしました。また、テンプレート ビューを使用して試してみました各ビューをロードすると、両方のシステムが正常にビューをロードします。後者は、スケルトンを使用しようとする前に持っていたもので、css を正常にロードしましたが、どちらもスケルトン css ファイルをロードしません。純粋なhtmlのレイアウトをドキュメント全体として正しく表示すると、すべてが正常にロードされます。何が間違っていますか?

これは私が私の見解に持っているものです:

これはナビです：

これが主な内容です:

これはサイドバーです（最初に表示を正しくしようとして開発したことはありません）：

これはフッターです：

私はスケルトンに不慣れで、簡単なサイトを動かそうとしていますが、Firefoxですでに問題が発生しています。コードは非常に単純です、ここにあります：

列を使用すると、Firefoxを除くすべてのブラウザで正常に表示されます。代わりに、クラスとして「2/3」、または「3/3」を使用すると、問題なく表示されます。

これは、私が列を使用したときにFirefoxが行うことです（写真）（上部102pxに奇妙なスペースを広告します）

「3分の2」を使用すると、Firefoxは再び正常に表示されます（写真）

私はすべてのコードを調べましたが、何が起こっているのか理解できません。なぜ列がFirefoxでうまく機能しないのですか？それが重要な場合、私は17.0.1を使用しています。

助けてくれてありがとう。

IE8 ドキュメント モード IE8では、superfish のバリエーションを使用するsimplethemesによる wp-skeleton テーマを使用しています。次のように表示される IE8 を除いて、すべてのブラウザーで問題なく動作するように見えます。

レスポンシブCSSフレームワークであるSkeletonを使用していますが、画面サイズがモバイル幅の場合、何らかの理由でcssがモバイルメディアクエリに応答しません。

タブレットメディアクエリに応答していますが、画面がモバイルサイズになった後、標準のCSS幅に戻ります。

これは私が取り組んでいるライブサイトです：

http://fine-grain-2.myshopify.com/

これが私が扱っているHTMLです：

モバイルメディアクエリCSSは次のとおりです。

正しく機能しているタブレットメディアクエリCSSは次のとおりです。

スケルトンフレームワークをインストールして体験しました。16列のレイアウトを使用していますが、iPhoneでテストすると、左右に余白があります。

誰かがアイデアを持っていますか？

ありがとう

Skeleton CSS グリッドを使用するのは初めてなので、無知なことをお許しください!

私の問題は最初は単純なように見えますが、少し困惑しました。

たとえば、幅 4 列の左側の列のサイドバーと、12 列にまたがる右側の列のコンテンツ領域を持つ Web サイトがあるとします。このようなもの：

小さい画面サイズでは、サイドバーが折りたたまれてメイン コンテンツ エリアの上に表示されます。これは私が望んでいるものではありません...小さいサイズでは線形であるため、サイドバーをメイン領域の下に表示して、より多くのモバイルデバイスでコンテンツが「最初に」表示されるようにします。

Skeleton のデフォルトの動作は、このサイドバーをメイン領域の上に重ねることです。

これに関する解決策についてのアイデアはありますか? 負のマージンを使用してマークアップを意味的に調整し、サイドバーをメイン領域の下に配置することはできますか?

ありがとう、マイケル。

Skeleton はすべての列に float:left と display:inline を使用します。列の高さを同じにする必要がありますが、ブラウザー ウィンドウのサイズが変更されたときに期待どおりに動作するように、float:left と display:inline を維持する必要があります。何か案が？

ルート div (コンテナ) をドキュメントの 100% にすることは可能ですか?
ここに私のコードがあります:

ありがとう

Skeltonボイラープレートを備えたflexsliderプラグインを使用しています。ただし、スライダーを大きな画像で動作させることはできません。理論的には、スライダーは画像を .flexslider クラスのサイズに合わせる必要がありますが、ビューポートのサイズが変更されたときに画面に合わせて画像のサイズを変更するのではなく、画像の一部のみを表示します。

私は非常に標準的な Skeleton フレームワークを使用しており、flexslider css や javascript には少しも触れていません。

対応する HTML は次のとおりです。

ドキュメントでflexslider javascriptプラグインが呼び出されていない場合、画像はコンテナdivのサイズに準拠しているように見えますが、そこに入ると機能しないようです。

助言がありますか？

ありがとう！