<!DOCTYPE html> <html> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title></title> <link rel="stylesheet" href="bootstrap.min.css"> <script src="jquery.min.js"></script> <style type="text/css"> .container-fluid{ background-color: pink; } </style> <body> <div class="container"> <h1>sit</h1> <h1>sit</h1> <!--small副标题 p标签 被设置为等高为二分之一行高 lead 突出显示 mark 有背景效果 容器 1.流体容器 2.固定容器 @media (min-width:768px){.container{width:750px}} @media (min-width:992px){.container{width:970px}} @media (min-width:1200px){.container{width:1170px}} .container-fluid{padding-right:15px;padding-left:15px;`````` 有上面的源码可以看出 阈值 width 1.大于1200px(lg 大屏PC) 1170px（1130px+槽宽） 2.大于等于992px(md 中屏PC)小于1200px 970px（940px+槽宽） 3.大于等于768px(sm 平板)小于992px 750px（720px+槽宽 所以值可能变） 4.小于768px(xs 移动手机) auto 栅格源码分析 1.流体容器&固定容器 公共样式 margin-right:auto; margin-left:auto; padding-left:15px; padding-right:15px; 2.固定容器 特定样式 顺序不能变 @media(min-width:@screen-sm-min){ width:@container-sm; } @media(min-width:@screen-md-min){ width:@container-md; } @media(min-width:@screen-lg-min){ width:@container-lg; } 如果宽度是1300px，那么 @media(min-width:@screen-sm-min){ width:@container-sm; } @media(min-width:@screen-md-min){ width:@container-md; }被读到过，但是被覆盖了 如果宽度700px，则上面三个样式都不能读到，样式直接是auto --> <h4>sit<small>sit</small></h4> <p>hello</p> <p class="lead mark">hello</p> <del>123</del> <p class="text-left text-lowercase">bootStrap</p> <p class="text-right text-uppercase">bootStrap</p> <p class="text-center text-capitalize">bootStrap</p> <div class="container-fluid">test</div> </div> </body> </html>
原文：https://www.cnblogs.com/zuiaimiusi/p/12167361.html