ブートストラップ

ブートストラップでのコンテナクラスとコンテナ流体クラスの違い



Difference Between Container Class



ブートストラップでのコンテナクラスとコンテナ流体クラスの違い

ここ数日で体系的にブートストラップを学び始めましたが、すぐに「ブロッキングタイガー」に遭遇しました：container with container-fluid違いは何ですか。に
たくさんの情報を調べてみると、同じ質問をしている人が多いのですが、以下の回答は一般的に反応が良く、100％広いのでそうですが、本当に理解できますか？とにかくできなかったので、自分でデモを書き始めました。に
‘container 'デモ

<html lang='zh-cn'> <head> <meta charset='utf-8'> <meta http-equiv='X-UA-Compatible' content='IE=edge'> <meta name='viewport' content='width=device-width, initial-scale=1'> <title>Hello Worldtitle> <link rel='stylesheet' type='text/css' href='css/bootstrap.min.css'> head> <body> <div class='container'> <h3>hello worldh3> div> <script type='text/javascript' src='js/jquery-1.11.3.min.js'>script> <script type='text/javascript' src='js/bootstrap.min.js'>script> body> html>
  • 1
  • 二
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 十一
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19

書き込み後にブラウザを開き、f12 containe rコンテナに15px paddingを超えるものがあり、ブラウザの幅に応じて変化するものを見つけますmargin、図のように
画像
画像
上の写真のボックスモデルは、画面がいっぱいになったときの私の価値です。ブラウザのズームは増減します。真実を見つけるために自分で試してみてください。に
コンテナ-流体のデモ
クラスをcontainer-fluid後で置き換えると、ページに明らかな変更があることがわかります
、示されているように
コンテナ流体
ボックスモデルをもう一度見てください
画像
今回は、コンテナ全体で15px paddingが固定されており、marginが追加されていないことがわかります。



結論として
containerクラスとcontainer-fluidクラスの違いは、ビューポートの幅によって変化するかどうかに反映されますmargin存在します。に
containerいわゆるアダプティブmargin変更を完了container-fluidクラスの100％の幅は、固有の15pxを参照しますpadding幅は常に現在のビューポートの幅。