• bootstrap3中container与container_fluid的区别


    .container与.container_fluid是bootstrap中的两种不同类型的外层容器,按照官方的说法,这两者的区别是:

      .container 类用于固定宽度并支持响应式布局的容器。

      .container-fluid 类用于 100% 宽度,占据全部视口(viewport)的容器。

    所谓固定宽度并不是允许开发者自己设置容器的宽度,而是bootstrap内部根据屏幕宽度利用媒体查询,帮我们设置了固定宽度,并且是能够自适应的。

    度,并且是能够自适应的。无论何种情况下,请不要手动为响应式布局中的外层布局容器设置固定宽度值。

    .container-fluid自动设置为外层视窗的100%,如果外层视窗为body,那么它将全屏显示,无论屏幕大小,并且自动实现响应式布局。

    以下是借鉴来的代码,仅供参考:

     1 /*0-768px以上宽度container为100%*/
     2 .container {
     3   padding-right: 15px;
     4   padding-left: 15px;
     5   margin-right: auto;
     6   margin-left: auto;
     7 }
     8 /*768-992px以上宽度container为750px*/
     9 @media (min- 768px) {
    10   .container {
    11      750px;
    12   }
    13 }
    14 /*992-1200px以上宽度container为970px*/
    15 @media (min- 992px) {
    16   .container {
    17      970px;
    18   }
    19 }
    20 /*1200px以上宽度container为1170px*/
    21 @media (min- 1200px) {
    22   .container {
    23      1170px;
    24   }
    25 }
    26 
    27 /*container-fluid为100%*/
    28 .container-fluid {
    29   padding-right: 15px;
    30   padding-left: 15px;
    31   margin-right: auto;
    32   margin-left: auto;
    33 }
    34 
    35 作者:JasonQiao
    36 链接:http://www.jianshu.com/p/a91f4cc4a7cb
    37 來源:简书
    38 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

     

  • 相关阅读:
    CentOS虚拟机查询jdk路径
    jsp定义全局变量:读取properties文件
    mysql查看视图用户
    httpclient 方式提供接口
    maven打包添加依赖
    mysql死锁+解决
    mysql 安装-zip版
    input type="hidden" js获取不到值(document.getelementbyid OR $(#).val())
    Mybatis——choose, when, otherwise可以达到switch case效果
    《Linux就该这么学》第九天课程
  • 原文地址:https://www.cnblogs.com/cjx-work/p/7967438.html
Copyright © 2020-2023  润新知