bootstrap的container容器和container-

2019-11-08  本文已影响0人  houxnan

说到bootstrap的container容器和container-fluid容器的区别,我们可以通过一个实验来说明:

代码如下:

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>bootstrap练习</title>

    <link rel="stylesheet" href="../css/bootstrap.min.css">

</head>

<body>

    <div class="container-fluid">

      <h1>hello world</h1>

    </div>

  <script src="../js/jquery.min.js"></script>

    <script src="../js/bootstrap.min.js"></script>

</body>

</html>

当容器的类为container-fluid的时候,视图如下:无论页面宽度多少时,视图中总是只有一个固定padding值存在

同样的一段代码,将  <div class="container-fluid">换成  <div class="container">时,得到的视图如下:视图中多了一个margin值,并且当页面变大时,margin值变大,页面变小时,margin值变小,甚至消失。

总结:
container 类和container-fluid类的区别体现在是否有随视口宽度改变的margin存在。

container类所谓的自适应也是通过margin的改变来完成,container-fluid类的百分百宽度是指在固有的15px的padding前提下宽度总是当前视口的宽度。

上一篇 下一篇

猜你喜欢

热点阅读