参考: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. C++中重载、重写(覆盖)和隐藏的区别实例分析

    这篇文章主要介绍了C++中重载.重写(覆盖)和隐藏的区别,是C++面向对象程序设计非常重要的概念,需要的朋友可以参考下 本文实例讲述了C++中重载.重写(覆盖)和隐藏的区别,对于C++面向对象程序设计 ...

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

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

  4. mysql函数操作

    <?php try{ $dbh = new PDO('mysql:dbname=testdb;host=localhost', 'mysql_user', 'mysql_pwd'); }catc ...

  5. UDP聊天实现(简单版)

    两者代码基本一致 关于套接字: 甲方: #include <stdio.h> #include <string.h> #include <netinet/in.h> ...

  6. 【Windows 8 Store App】学习二:ResourceLoader

    原文 http://www.cnblogs.com/java-koma/archive/2013/05/22/3093308.html 在项目开发时,通常有一些资源信息需要存储起来,比如请求的URL, ...

  7. Android XListView实现原理讲解及分析

    XListview是一个非常受欢迎的下拉刷新控件,但是已经停止维护了.之前写过一篇XListview的使用介绍,用起来非常简单,这两天放假无聊,研究了下XListview的实现原理,学到了很多,今天分 ...

  8. NOI2013 Day2

    NOI2013 Day2 矩阵游戏 题目描述:设矩阵\(F\) 求\(F[n][m](mod (10^9+7))\) solution: 这题可以求通项解决. 设\(X_i=F[i][m]\), \( ...

  9. python手记(9)

    本博客所有内容是原创,未经书面许可,严禁任何形式的转 http://blog.csdn.net/u010255642 tab #!/usr/bin/env python # example noteb ...

  10. ListView分割线

    在开发中遇到需要ListView 中每一个条目后面都有个分隔线,但是总是发现最后一个条目后面没有分隔符,后来查到原因,是因为ListView的layout_height=“wrap_content” ...