04-栅格系统相关类.html 844 B

1234567891011121314151617181920212223242526272829
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>栅格系统-类</title>
  8. <link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">
  9. <style>
  10. div {
  11. height: 50px;
  12. background-color: pink;
  13. margin-bottom: 50px;
  14. }
  15. </style>
  16. </head>
  17. <body>
  18. <!-- 版心样式:自带左右各15px的padding -->
  19. <div class="container">1</div>
  20. <!-- row类作用就是抵消container类的15px的内边距, row有-15px的外边距 -->
  21. <div class="container">
  22. <div class="row">2</div>
  23. </div>
  24. <!-- 宽度100%:自带左右各15px的padding -->
  25. <div class="container-fluid">3</div>
  26. </body>
  27. </html>