[解決済み] Bootstrapのグリッドで、列の幅を強制的に固定し、他の列を流動的にする方法
2022-02-19 10:53:54
質問
Bootstrapを使っているのですが、以下の画像のようなグリッドレイアウトを作りたいのですが、可能でしょうか?
画面サイズに関係なく、330pxで固定されたサイドバーを持ち、すべてのものを
#page-content
訪問者の画面の解像度に応じて、サイズを変更することができます。
<イグ
画像のようなレイアウトを実現するにはどうしたらよいですか?以下のようにすると
<div class="col-md-10" id="page-content">
<div class="col-md-2">...</div>
<div class="col-md-10">...</div>
</div>
<div class="col-md-2" id="sidebar">
...
</div>
の幅を固定するようにしてください。
#sidebar
で
width="330px";
を使用すると、画面サイズが小さい場合、コンテンツが右側に移動して見えなくなります。Bootstrapは
width: 16.66666667%;
に
.col-md-2
ということは、上位のdivのグリッドシステムを取り除かなければならないようです。
#page-content
と
#sidebar
. しかし、それならどうすれば
#page-conten
の左側にある残りのスペースを埋める。
#sidebar
.
解決方法は?
Bootstrapのグリッドは流動的であることを意図しているので、画面の大きさが変わると変化するようになっています。
希望のレイアウトを実現するためには
display: flex
または
display:table
の代わりに 私は
display:table
は、フレックスボックスよりもサポートが充実しているので、この例ではこの方法を採用しました。
のようなHTMLに変更する必要があります。
<div class="page">
<div class="page-content">
<div class="row">
<div class="col-md-2">
<div class="blue">test</div>
</div>
<div class="col-md-10">
<div class="green">test</div>
</div>
</div>
</div>
<div class="sidebar">
<div class="gold">test</div>
</div>
</div>
そして、使用したCSSはこちらです。
.page {
display: table;
width: 100%;
}
.page-content,
.sidebar {
display: table-cell;
}
.sidebar {
width: 330px;
}
.blue,
.green,
.gold {
height: 50px;
}
.blue {
background-color: blue;
}
.green {
background-color: green;
}
.gold {
background-color: gold;
}
フィドルはこちらで確認できます。 https://jsfiddle.net/m0nk3y/qjutpze4/
関連
-
[解決済み】iframeの高さを100%にする方法【重複】。
-
[解決済み] CSS color vs. background-color vs. background?
-
[解決済み] HTMLでSVGを使用して三日月を描画する
-
[解決済み] 迷子の終了タグ "head"
-
[解決済み] d3.tipが動作しないのはなぜですか?
-
[解決済み] IFrameからボーダーを取り除く
-
[解決済み] HTML CSS インビジブルボタン
-
[解決済み] 残りの幅を埋めるためにdivを展開する
-
[解決済み】Bootstrapで固定幅のボタンにする。
-
[解決済み】display:flexを使って残りの縦幅をCSSで埋める。
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】iframeを水平方向にセンタリングする方法は?
-
[解決済み] Bootstrapのカラムが機能しない
-
[解決済み] bodyタグに追加された奇妙なiframe、`rufous-sandbox`について
-
[解決済み] d3.tipが動作しないのはなぜですか?
-
[解決済み] will-change' や translateZ() ハックは 'transition: height' のパフォーマンスを向上させるか?
-
[解決済み] HTML5 Validation Error: body start tag が見えたが、同じタイプの要素がすでに開かれていた
-
[解決済み] css画像が表示されない
-
[解決済み] HTMLファイルへのリンクは可能ですか?
-
[解決済み] 入力のラジオ要素を水平に揃えるにはどうしたらいいですか?
-
[解決済み] アトムでキーバインドリゾルバーのポップアップを消すにはどうしたらいいですか?