Bootstarp中container类与container-fluid

最新推荐文章于 2023-08-30 16:35:05 发布

Courage-lu

最新推荐文章于 2023-08-30 16:35:05 发布

阅读量412

点赞数

本文链接：https://blog.csdn.net/weixin_45846805/article/details/106047873

版权

关于container类与container-fluid的区别：

我们用过demo来看看两者的区别：


<!DOCTYPE html>
<html lang="zn">
    <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>Title Page</title>
          <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
    </head>
    <body>
        <div class="container">
            <h3>hello world</h3>
        </div>

        <div class="container-fluid">
            <h3>hello world</h3>
            
        </div>">
       <script src="bootstrap-3.3.7-dist/js/jquery-1.11.3.js"></script>
       
          <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    </body>
</html>

通过浏览器检查先看看container：
在这里插入图片描述
我们发现container容器不止有15px的padding，还有一个会随着浏览器宽度变化而变化的margin

再来看看container-fluied：

此时整个容器就只有固定的15px的padding，并没有再加margin。

container 类和container-fluid类的区别体现在是否有随视口宽度改变的margin存在。
container类所谓的自适应也是通过margin的改变来完成，container-fluid类的百分百宽度是指在固有的15px的padding前提下宽度总是当前视口的宽度。

Courage-lu

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Bootstarp中container类与container-fluid

关于container类与container-fluid的区别：我们用过demo来看看两者的区别：<!DOCTYPE html><html lang="zn"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" cont
复制链接

扫一扫