参考: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. perl 打开和关闭文件

    #!/usr/bin/perl -w use strict; #print "please input a string\n"; #my $line = <STDIN> ...

  2. leetcode Remove Element python

    class Solution(object): def removeElement(self, nums, val): """ :type nums: List[int] ...

  3. json 的 使用方法以及与数组的区别

    JSON简介,全称是JavaScript Object Notation.它是基于JavaScript编程语言ECMA-262 3rd Edition-December 1999标准的一种轻量级的数据 ...

  4. #pragma anon_unions, #pragma no_anon_unions

    #pragma anon_unions, #pragma no_anon_unions 这些编译指示启用和禁用对匿名结构和联合的支持. 缺省设置 缺省值为 #pragma no_anon_unions ...

  5. 《Linux 设备驱动程序》读后感。 并发,竞态,死锁。

    1. 概念 并发:在操作系统中,是指一个时间段中有几个程序都处于已启动运行到运行完毕之间,且这几个程序都是在同一个处理机上运行,但任一个时刻点上只有一个程序在处理机上运行. 来源: 1. Linux ...

  6. UVA507-- Jill Rides Again

    题目链接:http://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem& ...

  7. Spring构造器注入、set注入和注解注入

    记得刚开始学spring的时候,老师就反复的提到依赖注入和切面,平常的java开发中,在某个类中需要依赖其它类的方法,则通常是new一个依赖类再调用类实例的方法,这种方法耦合度太高并且不容易测试,sp ...

  8. Pig Latin儿童黑话(java)

     ●假设单词以辅音字母開始,将词首的辅音字母字符串(第一个元音字母前的全部字母)从单词的开头移动到末尾,然后加上后缀ay,这样就形成了它的pig  latin. ●假设单词以元音字母開始,仅仅须要 ...

  9. asp.net ToString()方法介绍

      C 货币 2.5.ToString("C") ¥2.50 D 十进制数 25.ToString("D5") 00025 E 科学型 25000.ToStri ...

  10. JavaScript之获取和设置元素属性

    1.与我前面的随笔获取元素的那些方法不同http://www.cnblogs.com/GreenLeaves/p/5689075.html 获取元素属性的方法getAttribute()不属于docu ...