2 bogexueqianduan bogexueqianduan 于 2016.01.30 03:34 提问

bootstrap 栅格化布局 最大宽度无效
 <!DOCTYPE html>
<html lang="en">
<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>Document</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <style type="text/css">
    .col-md-1{
        border: 1px solid black;
    }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-1">哈哈哈</div>
            <div class="col-md-1">哈哈哈</div>
            <div class="col-md-1">哈哈哈</div>
            <div class="col-md-1">哈哈哈</div>
            <div class="col-md-1">哈哈哈</div>
            <div class="col-md-1">哈哈哈</div>
            <div class="col-md-1">哈哈哈</div>
            <div class="col-md-1">哈哈哈</div>
            <div class="col-md-1">哈哈哈</div>
            <div class="col-md-1">哈哈哈</div>
            <div class="col-md-1">哈哈哈</div>
            <div class="col-md-1">哈哈哈</div>
        </div>
    </div>
</body>
</html>

上面这段代码,用的是md的宽度,http://v3.bootcss.com/css/#grid-options

官方文档说,md的container的最大宽度是970px,但是为什么 上面这段代码container的宽度是1170px

2个回答

qq_19891827
qq_19891827   2016.01.30 09:48
已采纳

虽然md的container的最大宽度是970px,但是你的显示器屏幕的分辨率并不在md规定的分辨率内,而是在更大的分辨率即lg内了,所以container的宽度是1170px。

qq_19891827
qq_19891827 回复伯格学前端: 客气
2 年多之前 回复
qq_19891827
qq_19891827 回复伯格学前端: 客气
2 年多之前 回复
bogexueqianduan
bogexueqianduan 啊!懂了,container最大宽度是根据设备像素宽度来定的,md只是规定设备宽度小于992的时候会垂直排列用的,懂了懂了 谢谢
2 年多之前 回复
caozhy
caozhy   Ds   Rxr 2016.01.30 06:14

你自己贴出了链接了,还需要解释么?你的显示器属于大屏幕(横向>1200),所以用的是1170

看你的链接的“栅格参数”小节。

Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
Bootstrap栅格布局的注意事项
首先,栅格布局是将页面分为12列的,在不同的视口宽度之下,栅格布局的每一列的宽度应该是不一样的。从320一直到最大,分别是:col-xs-*,col-sm-*,col-md-*,还有col-lg-*,其中当我们的视口宽度>=768px的时候,我们的视口的宽度是使用col-sm,所以一般情况下我们只需使用col-sm即可,无需再使用col-md-*。     还有,当我们遇到在768px以上是左侧
Bootstrap的栅格化系统
目录:     1.Bootstrap栅格化系统         1.1 描述         1.2 代码示例         1.3 媒体查询     2.Bootstrap基本css样式的使用 1.Bootstrap栅格化系统    1.1 描述         bootstrap栅格化系统可以根据设备视口的大小变化去适当扩展到最多12列的
Bootstrap3的栅格化布局样式
栅格化布局,又称“网格系统”,是一种使用规则的网格阵列来指导和规范网页中的版面布局以及信息分布原文来自:http://caibaojian.com/bootstrap3-grid.html Bootstrap2.3的时候还支持IE7,到了3之后,就跟IE7以下说拜拜了。前面已经发过一篇:Bootstrap 3.0的扁平化来了,有兴趣的童鞋可以了解Bootstrap3有哪些特色。 Boo
Bootstrap的栅格化布局样式
今天在做尺寸的时候遇到了一些问题,这里做个笔记以免以后忘记!超小设备:尺寸小于768px,class的前缀是col-xs-,12列小型设备:尺寸位于768px和992px之间,class的前缀是col-sm-,12列中型设备:尺寸位于992px和1200px之间,class的前缀是col-md-,12列小型设备:尺寸大于等于1200px,class的前缀是col-lg-,12列
Bootstrap学习之二:栅格化布局
@(Bootstrap)导言前面我们讲了如何安装使用bootstrap框架,下面我们将会学习bootstrap的各种框架结构,布局。在这篇文章中将讲述如何使用栅格化布局 导言 什么是栅格化布局 开始栅格化布局a创建一个容器 b创建合适的栅格系统 c进行列的嵌套 d单元格的其他类 e列偏移1.什么是栅格化布局 Bootstrap内置了一套响应式、移动设备优先的流式栅格系统,随着屏幕设备或视口(vi
bootstrap的栅格布局不支持IE8该如何解决?
用bootstrap的栅格布局在IE8上出现失效的情况,通常有两种解决方式 方法/步骤 方法一:引用第三方js,一个叫respond.js的东西,github上可以搜到 方法二:由于IE8不支持媒体查询,所以对应不同分辨率的样式失效了,所以解决方法也很简单,都用col-xs的列布局来实现就好了。
深入理解BootStrap-- 栅格系统(布局)7
1、栅格系统(布局) Bootstrap内置了一套响应式、移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列。 我在这里是把Bootstrap中的栅格系统叫做布局。它就是通过一系列的行(row)与列(column)的组合创建页面布局,然后你的内容就可以放入到你创建好的布局当中。下面就简单介绍一下Bootstrap栅格系统的工作原理:
深入理解BootStrap之栅格系统(布局)
1、栅格系统(布局) Bootstrap内置了一套响应式、移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列。 我在这里是把Bootstrap中的栅格系统叫做布局。它就是通过一系列的行(row)与列(column)的组合创建页面布局,然后你的内容就可以放入到你创建好的布局当中。下面就简单介绍一下Bootstrap栅格系统的工作原理:
Bootstrap栅格系统原理
Bootstrap栅格系统原理 Bootstrap栅格系统布局 1、栅格系统简介 1)响应式设计 我们现实生活中所使用到的设备有手机、平板电脑、笔记本、台式机。这些设备最大的区别在于它的屏幕的大小不一样,也就是分辨率大小不一样。 响应式设计最核心的思想是就一个网站能够兼容多个终端,而不是为每个终端特定的一
浅谈CSS响应式布局——Bootstrap栅格化布局
超小设备手机( 小型设备平板电脑(≥768px) 中型设备台式电脑(≥992px) 大型设备台式电脑(≥1200px) 网格行为 一直是水平的 以折叠开始,断点以上是水平的 以折叠开始,断点以上是水平的 以折叠开始,断点以上是水平的 最大容器宽度 None (auto) 750px 970px 1170px