第四十五节 jQuery之bootstrap列偏移 

 1 <!-- 列偏移：
 2         1、col-lg-offset-
 3         2、col-md-offset-
 4         3、col-sm-offset-
 5         4、col-xs-offset- -->
 6 <!DOCTYPE html>
 7 <html lang="en">
 8 <head>
 9     <meta charset="UTF-8">
10     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
11     <title>Document</title>
12     <script type="text/javascript" src="../jquery-1.12.4.min.js"></script>
13     <script type="text/javascript" src="./js/bootstrap.min.js"></script>
14     <link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">
15     <style type="text/css">
16         div[class*='col-']{
17             height: 50px;
18             background-color: gold;
19             border: 1px solid #000;
20         }
21 
22     </style>
23 </head>
24 <body>
25     <div class="container">
26         <div class="row">
27             <div class="col-lg-5 col-lg-offset-1 col-md-5 col-md-offset-1">col-lg-5</div>
28             <div class="col-lg-5 col-md-5">col-lg-5</div>
29         </div>
30     </div>
31 
32     <br>
33     <br>
34     <div class="container">
35         <div class="row">
36             <div class="col-lg-4 col-lg-offset-1">col-lg-5</div>
37             <div class="col-lg-4 col-lg-offset-2">col-lg-5</div>
38         </div>
39     </div>
40 </body>
41 </html>

 

posted @ 2020-03-16 20:47  kog_maw  阅读(121)  评论(0)    收藏  举报