タグ付けされた質問 「fluid-layout」

Twitterブートストラップグリッドのさまざまなオプションと、それらがどのように連携するかについて、混乱しています。 まず、通常のcontainer、またはを固定できますcontainer-fluid。 次に、どちらも通常のrow行または流動的な行のいずれかを含めることができますrow-fluid。つまり、流動的な列を持つ固定コンテナ、または固定された列を持つコンテナ-流体... その上に、「レスポンシブ」メディアクエリを含めるかどうかを指定できます。 私はこれらのものがどのように相互作用するかについて混乱しています。しかし、1つの明白な例から始めましょう。 上の例のページ自体、両方の一例として提示しているものがあります固定グリッドと流体グリッド ただし、私のブラウザでは、そのサンプルページ自体で、両方のグリッドが同じように動作します。サンプルページがオプションのレスポンシブメディアクエリを使用しているためでしょうか？では、両方の私は徐々に私のブラウザウィンドウを狭める開始した場合、グリッドの例としては、グリッド要素がないではない徐々に狭く取得-特定の（応答）境界幅が到達すると、彼らはより小さなサイズに、そして再び、さらに境界幅でスナップ。しかし、通常の「固定」の例と「流体」の例はどちらもここではまったく同じように動作します。つまり、違いは何ですか。

399 twitter-bootstrap  responsive-design  fluid-layout  fixed-width 

HTML入力があります。 入力にはpadding: 5px 10px;、親divの幅（流体）の100％にする必要があります。 しかし、使用するwidth: 100%;と、入力は100% + 20pxどうすればこれを回避できますか？ 例

397 html  css  width  fluid-layout 

流動的な幅のコンテナーDIVがあります。 この中に私は4つのDIVをすべて300px x 250px ... <div id="container"> <div class="box1"> </div> <div class="box2"> </div> <div class="box3"> </div> <div class="box4"> </div> </div> ボックス1を左にフロートさせ、ボックス4を右にフロートさせ、ボックス2と3を等間隔に配置します。間隔も滑らかにしたいので、ブラウザを小さくすると、スペースも小さくなります。

329 html  css  fluid-layout 

2つのdivを並べて配置し、次のCSSを使用しようとしています。 #left { float: left; width: 65%; overflow: hidden; } #right { overflow: hidden; } HTMLはシンプルで、ラッパーdivに左と右の2つのdivがあります。 <div id="wrapper"> <div id="left">Left side div</div> <div id="right">Right side div</div> </div> StackOverflowや他のサイトでもより良い方法を探すために何度も試みましたが、正確なヘルプが見つかりませんでした。 したがって、コードは一見問題なく動作します。問題は、幅（％）を増やすと、左側のdivが自動的にパディング/マージンを取得することです。したがって、幅が65％の場合、左側のdivにはパディングまたはマージンがあり、右側のdivと完全に揃っていません。次に、ページを拡大すると、右側のdivが左側のdivの下にスライドします。 注：すみません、たくさん検索しました。この質問は何度も尋ねられましたが、それらの答えは私を助けていません。私の場合、何が問題なのかを説明しました。 私はそれに対する修正があることを望みます。 ありがとうございました。 編集：申し訳ありませんが、HTMLの問題です。左側と右側の両方に2つの「ボックス」divがあり、％でパディングがあり、幅が広いため左側がより多くのパディングを示していました。申し訳ありませんが、上記のCSSは完璧に動作し、その流動的な表示と修正が行われています。間違った質問をして申し訳ありません...

222 css  html  fluid-layout  fluid 

流動的なレイアウトで、サイドバーナビゲーションを常にスクロールに固定することは可能ですか？

92 css  twitter-bootstrap  css-position  fluid-layout