zoukankan      html  css  js  c++  java
  • 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 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

     

  • 相关阅读:
    谈Delphi编程中“流”的应用 (一)
    Ihtmldocument2接口的使用
    TWebBrowser 异常 invalid floating point operation
    万一的 Delphi 博客 (注意 delphi的新功能)
    正则表达式应用(一)
    查询数据库所有表所有字段的某个值,生成更新代码 (VB)
    正则表达式应用(二)
    让程序支持脚本
    查探对方是否加你为好友
    常用的一些批处理,脚本功能(一)
  • 原文地址:https://www.cnblogs.com/cjx-work/p/7967438.html
Copyright © 2011-2022 走看看