脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → bootstrap3中container与container_fluid的区别

bootstrap3中container与container_fluid外层容器的区别讲解

 更新时间：2017年12月04日 09:47:54   作者：cjx_work  
.container与.container_fluid是bootstrap中的两种不同类型的外层容器。这篇文章主要介绍了bootstrap3中container与container_fluid的区别,需要的朋友可以参考下

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

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

　　.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

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

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

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

以下是借鉴来的代码，仅供参考：

/*0-768px以上宽度container为100%*/
.container {
 padding-right: 15px;
 padding-left: 15px;
 margin-right: auto;
 margin-left: auto;
}
/*768-992px以上宽度container为750px*/
@media (min-width: 768px) {
 .container {
 width: 750px;
 }
}
/*992-1200px以上宽度container为970px*/
@media (min-width: 992px) {
 .container {
 width: 970px;
 }
}
/*1200px以上宽度container为1170px*/
@media (min-width: 1200px) {
 .container {
 width: 1170px;
 }
}
/*container-fluid为100%*/
.container-fluid {
 padding-right: 15px;
 padding-left: 15px;
 margin-right: auto;
 margin-left: auto;
}

总结

以上所述是小编给大家介绍的bootstrap3中container与container_fluid外层容器的区别讲解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

相关文章

  • JS请求servlet功能示例

    JS请求servlet功能示例

    这篇文章主要介绍了JS请求servlet功能,结合具体实例形式分析了javascript使用ajax请求servlet端响应的主要功能代码与相关操作技巧,需要的朋友可以参考下
    2017-06-06
  • JS对URL字符串进行编码/解码分析

    JS对URL字符串进行编码/解码分析

    节约时间，先写出总结，推荐使用encodeURIComponent()来对URL进行编码。
    2008-10-10
  • JavaScript注册监听事件和清除监听事件方式详解

    JavaScript注册监听事件和清除监听事件方式详解

    js中事件监听就是利用addEventListener来绑定一个事件,这个用法在jquery中非常常用并且简单,但在原生js中比较复杂,下面这篇文章主要给大家介绍了关于JavaScript注册监听事件和清除监听事件方式的相关资料,需要的朋友可以参考下
    2023-05-05
  • JS addEventListener()和attachEvent()方法实现注册事件

    JS addEventListener()和attachEvent()方法实现注册事件

    这篇文章主要介绍了JS addEventListener()和attachEvent()方法实现注册事件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-01-01
  • JS逆向之爱奇艺滑块加密的实现

    JS逆向之爱奇艺滑块加密的实现

    本文主要介绍了JS逆向之爱奇艺滑块加密的实现，文中根据实例编码详细介绍的十分详尽，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-03-03
  • 前端HTTP发POST请求携带参数与后端接口接收参数的实现

    前端HTTP发POST请求携带参数与后端接口接收参数的实现

    近期在学习的时候,碰到一个关于post的小问题,故拿出来分享一下,下面这篇文章主要给大家介绍了关于前端HTTP发POST请求携带参数与后端接口接收参数的相关资料,需要的朋友可以参考下
    2022-10-10
  • 微信小程序实现工作时间段选择

    微信小程序实现工作时间段选择

    这篇文章主要为大家详细介绍了微信小程序实现工作时间段选择，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-02-02
  • 前端如何控制并发请求举例详解

    前端如何控制并发请求举例详解

    在项目中我们会遇到一次请求多个接口,当所有请求结束后进行操作,也会遇到多个请求（大量）同时进行请求资源,这篇文章主要给大家介绍了关于前端如何控制并发请求举例的相关资料,需要的朋友可以参考下
    2024-09-09
  • electron-builder允许安装时请求提升权限的场景分析

    electron-builder允许安装时请求提升权限的场景分析

    electron-builder 作为一个用于 Electron 应用程序打包的工具,需要下载并使用 Electron 运行时来创建可执行文件,这篇文章给大家介绍electron-builder允许安装时请求提升权限的相关知识,感兴趣的朋友跟随小编一起看看吧
    2024-03-03
  • JS实现动态表格的添加，修改，删除功能(推荐)

    JS实现动态表格的添加，修改，删除功能(推荐)

    这篇文章主要介绍了JS实现动态表格的添加，修改，删除功能(推荐)的相关知识，非常不错，具有参考借鉴价值，感兴趣的朋友一起学习吧
    2016-06-06

最新评论