問題タブ [grid-system]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票する
1 に答える
1250 参照

css - スケルトン CSS クラス グリッド

Skeleton.css を使用して wordpress でグリッド システムを作成しています。

このチュートリアルでは、ヘッダーの次のマークアップを示しています。ここでは、ロゴに 3 つのクラス (5 つの列と clearfix) があることがわかります。

しかし、スケルトンcssを見ると、「5」のクラスが表示されないので、.five.columnsに変更しましたが、違いはありません。クラス.five.columnsの周りに境界線を作成しましたが、表示されません明らかな何かが欠けていますか?

どうもありがとう

0 投票する
1 に答える
64 参照

css - 高さを固定 + 垂直方向に整列

高さを固定したセクションに加えて、垂直に配置された要素をグリッド対応の動作に合わせるのに問題があります。唯一の制約は、セクションのサイズを固定する必要があることです。

SO の例を見てきましたが、列のスタッキング動作が壊れています。

私が達成しようとしていることについては、添付の jpeg を参照してください。

グリッドレイアウト

0 投票する
1 に答える
210 参照

jquery - 流体グリッドの親ラッパー内の固定位置 div?

流動的な 12 列のグリッドを使用して Web サイトを構築しました。ページの上部に到達したときに、右側の列の div の 1 つの位置を修正したい ( StickyJsまたは同等のものを使用)

ただし、固定位置が適用されると、div は DOM から取り出され、div が親の書式設定を失うため、グリッド構造が完全に壊れます。

https://jsfiddle.net/k4r00au0/

スクロール位置を修正した後、div の位置とサイズを維持する方法はありますか?

私はもう試した:

無駄に

助けてくれてありがとう、これに少し困惑しています!

0 投票する
3 に答える
10153 参照

html - ブートストラップ 3 col-xs および col-md が応答しない

Col-xs と col-md に問題があります。

だから私が悪いことを続ける前に、私の使い方を説明してください。詳細を入力して家具の数量を入力できるユーザーフォームを作成しようとしています。家の中には別々のセクションがあるため、家具セクションはタブコンテンツ内にあります。

したがって、col-xs がラベル用の列と数量入力用の列の 2 つの列にまたがるのが好きです。その後、ゆっくりと 2 列ずつ増加するため、sm はラベル、数量、ラベルの数量などを表示します。

col-sm と col-lg は完全に機能しますが、col-xs と col-md は機能しません。まるでスキップされているかのようです。助けてください。

これは私のコードです...

私は Bootstrap と Web レイアウトに非常に慣れていませんが、批判は大歓迎です。

ps。コード挿入がこれを行っている理由を理解できないレイアウトの問題を許してください

pps。レイアウトの例については、このSimilerの質問を確認してください: 未回答の質問

pps。これが私のモバイル問題の画像です.... ここに画像の説明を入力

0 投票する
1 に答える
31 参照

html - Fluid Design Align 続きを読む リンク

現在、私は自分のウェブサイトを流動的にするように再設計しています。1% css グリッドを使用しています。ただし、複数の列で [続きを読む] リンクを水平方向に配置するのは困難です。問題は、ビューポートのサイズが変更されると、readmore リンクが、それが属する列の下ではなく、互いの下に表示されることです。これは、html 構造に固有のものです。これを達成するためにどのように再設計できますか?

主な問題は、製品の div 内に readmore リンクを配置した場合、高さを指定できないことです。これは、ブラウザー ウィンドウのサイズを変更すると高さが変わるためです (テキストの折り返しのため)。この場合、readmore リンクをどのように配置しますか。

スクリーンショット:

位置合わせされたリンク

望ましくない動作

HTML 構造 (1% グリッド css のみ適用可能、シンプルなフロート)

0 投票する
1 に答える
183 参照

javascript - JS または JQuery を使用してグリッドを作成する

私は JS が初めてで、The Odin Project のレッスンに取り組んでいます。私は最初の JS/JQuery プロジェクトを使用していますが、このプロジェクトで問題が発生しています。

JS/JQuery を使用して、ユーザーが 1 ~ 16 の数字を入力すると、ページのサイズに合わせてグリッドが表示されるようにするにはどうすればよいですか。つまり、ユーザーが 3 と入力すると、3x3 グリッドで Web ページのサイズが出てきます。または、ユーザーが 16 と入力すると、16x16 のグリッドが出てきますか?

私は率直な答えを望んでいませんが、誰かがスターターコードで正しい方向に向けることができればどうでしょうか? 最善の方法は、div を作成して .append() 関数を使用することだと思いますか? ここでもう少し方向性が必要です。

0 投票する
2 に答える
189 参照

html - ブートストラップの小さな画面で div コード (div 自体ではない) を非表示にします

angularjs を ui ブートストラップおよび ngSticky モジュールと組み合わせて使用​​して、Web アプリをコーディングしています。

ブートストラップの小さな画面で ngSticky に div を動作させたくありません。以下の div コードのスティッキーな offset="65"を小さな画面またはモバイル画面で非表示にする方法はありますか? よろしくお願いします!