bootStrap需要为这个页面内容和栅格系统包裹一个.container容器，bootStrap预先定义好了这个类，叫.container它提供了两个做此用处的类。

container类

  • 响应式布局的容器 固定宽度
  • 大屏（>=1200px）宽度定为1170px
  • 中屏（>=992px）宽度定为970px
  • 小屏（>=768px） 宽度定位750px
  • 超小屏 （100%）

container-fluid类

  • 流式布局容器 百分百宽度
  • 占据全部视口（viewport）的容器。
  • 适合于单独做移动端开发

代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.   <title>Document</title>
  9.   <link rel="stylesheet" href="bootStrap/css/bootstrap.min.css">
  10. </head>
  12. <body>
  13.   <div class="container">2345</div>
  14.   <div class="container-fluid">2345</div>
  15. </body>
  17. </html>