問題タブ [gutter]
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.
twitter-bootstrap - ブートストラップ 3 ガター サイズ
ブートストラップを使い始めたばかりで、目標を達成する方法がわかりません。
この画像のように、ガターをすべて均等にしたいと思います。
デフォルトでは、これらは次のように表示されます。列間の垂直ガター (青色でマーク) は、水平ガターと外側ガターの 2 倍です。
これを解決するための最良の方法についての助けは、おそらく感謝されます。
margin - Bootstrap 3グリッドシステムでガターを調整するには?
新しい Bootstrap 3 グリッド システムは優れています。すべての画面サイズでのレスポンシブ デザインではより強力で、ネストされたデザインでははるかに簡単です。
しかし、私には理解できなかった問題が1つあります。列の間に正確なギャップを追加するにはどうすればよいですか? コンテナーが 960px、310px に 3 列、3 列の間に 15px に 2 つのガターがあるとします。それ、どうやったら出来るの?
html - 流動的なグリッドと固定されたガターを備えた等しい高さの隣接する div
ここで、ガターが固定された流体グリッドに関する複数の質問と回答を見てきました。また、同じ高さのフルイド幅の div 列についても多く見てきました。私は両方を同時にやろうとしていますが、具体的な解決策は見つかりませんでした。
私はそれを機能させることができましたが、私の解決策は少し「ハッキー」で不安定なようです。以下は、jsFiddle リンクを使用した私のマークアップです。これは、ガターを固定して同じ高さの流体幅の div を実現する安全な方法ですか、それともより良い解決策をお勧めしますか? 最近、セマンティクスを改善し、堅牢なコードを作成しようとしています...
**ブラウザーのサポートには IE9+ のみが必要です
HTML
CSS
私の最大の懸念は、空のガター div です。建設的なフィードバックをいただければ幸いです。
twitter-bootstrap - ブートストラップ 3.1.1 で複数のブレークポイントに一貫したグリッド ガター幅を追加する方法
私は最新のブートストラップを使用していますが、レスポンシブ グリッドのアイテム間に単純なマージンを追加することができません。col 設定 (col-lg / col-md / col-sm / col-xs) に基づいて 4 / 3 / 2 / 1 列からスケーリングする単純なグリッドがあります。
上記のレイアウトでアイテム間の単純なマージンを取得するために、デフォルトのスタイル(または less プロパティを直接)をオーバーライドする簡単な方法が欲しいです。
デフォルトでは、これは正しくスタックされますが、各アイテムは互いに直接隣り合っています。最小限のハッキングで必要なガター幅を実現するにはどうすればよいですか?
css - ブートストラップ 3: 異なるコンテナー幅のガター幅を計算する方法
提供されたデザインに基づいて、ブートストラップのコンテナー幅を 981px に変更しました。
ガターの幅が 30px に設定されていることに気付きましたが、コンテナーの幅が異なる場合、適切な幅をどのように判断すればよいですか?
コンテナの最大幅を 981px に維持したいのは、デザイナーが Photoshop でレイアウトを実装した方法だからです。
たとえば、幅が 981 ピクセルで、コンテナーの幅全体にまたがる画像があります。
css - CSSガターオーバーフローボディ
私の自家製の CSS グリッドに問題があります。.row のエッジがボディのエッジに接触すると、オーバーフローが発生します。ここでデモを参照してください: http://jsfiddle.net/57BGe/3/説明のために 更新
どうすればオーバーフローを防ぐことができますか? (オーバーフロー: なし。電話ではまだスクロールでき、デスクトップではある程度の力でスクロールできるため、機能しません)
* UPDATE *
Bootstrap を見ると、 # http://getbootstrap.com/css/
dev コンソールを使用してみて、.row の margin-left を body でオーバーフローするものに変更してください。(例: -150px)
これを行っても、水平方向にスクロールできません。