参考:http://stackoverflow.com/questions/15884102/bootstrap-how-do-i-change-the-width-of-the-container

怎么更改contianer 的width?

这样.container{ width:xxx;}

就可以了吗?

错。that will break everything, since each span class has a fixed width which is calculated in relation to thecontainer width.所有我们必须重新计算span1-span12的width。

解决办法:

假设我们想设置widht为1000px.去

Go to the Customize section on Bootstrap site and choose the size you prefer. You'll have to set@gridColumnWidth and @gridGutterWidth variables.

For example: @gridColumnWidth = 65px and @gridGutterWidth = 20px results on a 1000pxlayout.

Then download it.

是怎么计算的?

12*(gridColumnWidth+gridGutterWidth)-gridGutterWidth=your width.

Theoretically, there are infinite combinations that match 1000px. An example: 12*65 + 11*20 = 1000 (there are only 11 gutters between columns).

bootstrap 更改container 的width的更多相关文章

  1. bootstrap中container和container-fluid的区别与用法

    对bootstrap框架有一定了解的朋友都知道,一般页面布局中的开头会使用到container或container-fluid类,那么它们有什么区别呢?不急!下面为您讲解. 我们先来看看官方对这两个类 ...

  2. 记一个bootstrap定制container导致页面X轴出现横向滚动条的坑

     壹 ❀ 引 在bootstrap定制时,因为UI给的图纸的页面主体部分宽度为1200px,所以我将container容器宽度从默认的1170px改成了1200px,随后在页面缩小的调试过程中发现了页 ...

  3. [Bootstrap] 1. container & container-fluid

    Container: 居中 <!DOCTYPE html> <html> <head> <title>Blasting Off With Bootstr ...

  4. 【bootstrap】.container与.container_fluid

    .container与.container_fluid是bootstrap中的两种不同类型的外层容器,区别是: .container 类用于固定宽度并支持响应式布局的容器.不用你自己设宽度,通过< ...

  5. Bootstrap中container与container-fluid的区别

    /*0-768px以上宽度container为100%*/ .container { padding-right: 15px; padding-left: 15px; margin-right: au ...

  6. Expanded, SingleChildScrollView, CustomScrollView, container, height, width

    SingleChildScrollView, CustomScrollView, container, init: double.inifinity. then use Expanded to con ...

  7. bootstrap中container和container-fluid的区别

    container和container-fluid 在bootstrap中,两者都是设置文本居中,但是它们还是有很大差别的 container 是随屏幕宽度的变化而变化的,是阶段性变化,有一个随浏览器 ...

  8. jekyll bootstrap更改主题theme

    使用主题 介绍: 由于JB版本号0.2.X的主题,如今全然是模块化的.他们跟踪和单独版本号的主题包. 这让每一个人都能够自由公布和共享主题. Jekyll-Bootstrap v 0.2.x仅仅附带t ...

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

    container 类和container-fluid类的区别体现在是否有随视口宽度改变的margin存在. container类所谓的自适应也是通过margin的改变来完成,container-fl ...

随机推荐

  1. 并发编程: c++11 thread(Func, Args...)利用类成员函数创建线程

    c++11是VS2012后支持的新标准,为并发编程提供了方便的std::thread. 使用示例: #include <thread> void thread_func(int arg1, ...

  2. Java提高学习之Object类详解(1)

    转自:http://www.importnew.com/10304.html 问:什么是Object类? 答:Object类存储在java.lang包中,是所有java类(Object类除外)的终极父 ...

  3. Android模拟器使用笔记,学习head_first python 安卓开发章节

    学习head_first python 安卓开发那一章需要的程序android-sdk_r23.0.2-windows.zip //模拟器 PythonForAndroid_r4.apk sl4a_r ...

  4. scala函数进阶与lazy的作用

    内容如下. lazy修饰的变量可以延迟初始化,如下面所示,文件未必存在,file变量未必有内容.

  5. 收藏的技术文章链接(ubuntu,python,android等)

    我的收藏 他山之石,可以攻玉 转载请注明出处:https://ahangchen.gitbooks.io/windy-afternoon/content/ 开发过程中收藏在Chrome书签栏里的技术文 ...

  6. 查看ORACLE中正在运行的存储过程 kill

    1:登陆PLSQL Developer,写一个存储过程,向一个表中插入值,并运行存储过程 2:打开PLSQL Developer的命令窗口 .--终止procedure   11.select * f ...

  7. [Leetcode][Python]36: Valid Sudoku

    # -*- coding: utf8 -*-'''__author__ = 'dabay.wang@gmail.com' 36: Valid Sudokuhttps://oj.leetcode.com ...

  8. Linux-VPN安装配置方法

    VNP服务器IP地址为:192.168.6.6 一.编译安装:   注意:可能需要ppp.libcap.libcap-devel ncurses-devel RPM 包支持,如果没有请安装 libca ...

  9. mysql字符集编码乱码测试如下

    创建三个表tb_latin1,tb_utf8,tb_gbk,编码分别为latin1/utf8/gbk “你好a”字符串编码如下GBK : %C4%E3 %BA%C3 %61UTF-8 : %E4%BD ...

  10. objective-c 关键字和概念

    @ 看到这个关键字,我们就应该想到,这是Object-C对C语言的扩展,例如@interface XXX. @interface 声明类 @implementation 实现类 @protocol 声 ...