css - Bootstrap のコンテナ div をビューポートの左端から 100 ピクセル離すにはどうすればよいですか?

Question

コンテナーにある Twitter Bootstrap 固定レイアウトを使用していdivます。

margin-left: auto;
margin-right: auto;

そのため、常に中心に留まります。

私がやりたいことは、左のブラウザーウィンドウの境界線とコンテナーの間に 100 ピクセルの隙間ができるようにコンテナーを配置することです。ウィンドウが小さくなったら、コンテナをウィンドウの境界に移動します。

どうすればこれを達成できますか？

score 4 · Accepted Answer

コンテナーの余白を変更する代わりに、container-fluid大きな画面で 12 列のうち 8 (または 10) 列のみを使用することもできます...

<div class="container-fluid">
    <div class="row">
        <div class="col-md-8">
         .. page layout here
        </div>
    </div>
</div>

score 2 · Accepted Answer

twitter ブートストラップ css ファイルの.containerto haveを上書きするmargin-left: 100pxと、近くに配置する問題が解決されます。

ウィンドウが小さくなったときに近づける方法については、cssで最大100pxになるようにする方法がわかりません。ただし、最大値がなくても実行可能ですmargin-left: x%。ここで、x は適切な数値です。そうすれば、ブラウザウィンドウのサイズが変わると、左マージンも変わります。

これが役に立ったことを願っています。

score 0 · Accepted Answer

ここに私がやったことがあります：

.container {
  padding-left: 10px;
  padding-right: 250px;
}

探していた結果とまったく同じではありませんが、かなり近い結果が得られます。最初のスパン 3 はサイドバーで、最後のスパン 9 はメインコンテンツエリアです。メインコンテンツエリアは常に中央に配置され、その横にサイドバーが配置され、ウィンドウの境界線との間に最小 10 ピクセルの隙間があります。

score 0 · Accepted Answer

流体レイアウトを使用して、本文にパディングを追加します。

body { padding-left: 100px; }

そうすれば、コンテンツは常に左側から 100px までウィンドウを埋めます。

4 に答える 4