参考: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. Python核心编程读笔 6: 映射和集合类型

    第七章 映射和集合能力 一 字典(python中唯一的映射类型) 1 基本 创建和赋值: 正常创建:>>>dict = {'name':'earth', 'port':80} 用工厂 ...

  2. [置顶] 蓝牙基础知识进阶——Physical channel

    从本篇文章开始,晓东将会和大家一起来学习一些蓝牙的比较高阶的基础知识. 二.物理通道 物理通道是piconet区分的标准,它是蓝牙系统结构层次中的最底层了.     Q1:物理通道有哪些类型 物理通道 ...

  3. Nodejs学习笔记——Assert(断言)

    Assert - a:actual e:expected m:message o:operator v:value b:block assert.fail(a, e, m, o) assert(v, ...

  4. git彻底删除commit记录的方法

    在github上,如果非默认分支的话,直接用以下方法: git reset --hard <commit_id> git push origin HEAD --force 如是默认分支,需 ...

  5. Latex笔记-基本布局

    转自https://linhan.blog.ustc.edu.cn/?p=135&cpage=1 目录改用中文标题并且居中 \renewcommand{\contentsname}{\cent ...

  6. [MATLAB] 利用遗传算法函数求目标函数的最优解

    最近接触到了遗传算法以及利用遗传算法求最优解,所以就把这些相关的内容整理记录一下. 一.遗传算法简介(摘自维基百科) 遗传算法(英语:genetic algorithm (GA))是计算数学中用于解决 ...

  7. asp.net内置对象session和cookie

    1.各个机器的session对象不同,不同浏览器之间不通用(换个浏览器,是个新的session). 2.session状态对象起始于网页打开,终止于网页关闭,生命周期有限. 3.关闭浏览器/超时的情况 ...

  8. 帝国cms内容页模版

    <title>[!--pagetitle--]</title> <meta name="keywords" content="[!--pag ...

  9. 深入GDI图像显示

    摘  要:本文首先给出了一种结合了DIB和DDB两种位图优点的图像显示方法,其次对GDI函数的高级应用,如透明位图显示.图像旋转显示.图像镜像显示进行了研究. 关键词:GDI图像显示,特殊GDI函数的 ...

  10. 清风注解-Swift程序设计语言

    前言 Apple 发布了全新的 Swift 程序设计语言,用来开发 iOS 和 OS X 平台的应用程序.其目的不言而喻:就是为了给老迈的 Objective-C 一个合适接班人!因此,不难预见,未来 ...