bootstrap 更改container 的width
参考: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 1000px
layout.
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的更多相关文章
- bootstrap中container和container-fluid的区别与用法
对bootstrap框架有一定了解的朋友都知道,一般页面布局中的开头会使用到container或container-fluid类,那么它们有什么区别呢?不急!下面为您讲解. 我们先来看看官方对这两个类 ...
- 记一个bootstrap定制container导致页面X轴出现横向滚动条的坑
壹 ❀ 引 在bootstrap定制时,因为UI给的图纸的页面主体部分宽度为1200px,所以我将container容器宽度从默认的1170px改成了1200px,随后在页面缩小的调试过程中发现了页 ...
- [Bootstrap] 1. container & container-fluid
Container: 居中 <!DOCTYPE html> <html> <head> <title>Blasting Off With Bootstr ...
- 【bootstrap】.container与.container_fluid
.container与.container_fluid是bootstrap中的两种不同类型的外层容器,区别是: .container 类用于固定宽度并支持响应式布局的容器.不用你自己设宽度,通过< ...
- Bootstrap中container与container-fluid的区别
/*0-768px以上宽度container为100%*/ .container { padding-right: 15px; padding-left: 15px; margin-right: au ...
- Expanded, SingleChildScrollView, CustomScrollView, container, height, width
SingleChildScrollView, CustomScrollView, container, init: double.inifinity. then use Expanded to con ...
- bootstrap中container和container-fluid的区别
container和container-fluid 在bootstrap中,两者都是设置文本居中,但是它们还是有很大差别的 container 是随屏幕宽度的变化而变化的,是阶段性变化,有一个随浏览器 ...
- jekyll bootstrap更改主题theme
使用主题 介绍: 由于JB版本号0.2.X的主题,如今全然是模块化的.他们跟踪和单独版本号的主题包. 这让每一个人都能够自由公布和共享主题. Jekyll-Bootstrap v 0.2.x仅仅附带t ...
- bootstrap中container 类和container-fluid类的区别container类所谓的自适应也是通过margin的改变来完成,container-fluid类的百分百宽度是指在固有的15px的padding前提下宽度总是当前视口的宽度。
container 类和container-fluid类的区别体现在是否有随视口宽度改变的margin存在. container类所谓的自适应也是通过margin的改变来完成,container-fl ...
随机推荐
- MIT6.828 虚拟地址转化为物理地址——二级分页
这个分页,主要是在mit6.828的lab2的背景下来说的. Mit6.828 Lab2:http://pdos.csail.mit.edu/6.828/2014/labs/lab2/ lab2主要讲 ...
- Ubuntu安装Mysql及使用
(1)在线安装:sudo apt-get install mysql-server(2)管理mysql: sudo /etc/init.d/mysql start===========>开启my ...
- Unhandled Exxception “Unhandled exception type IOException”?
Unhandled Exxception “Unhandled exception type IOException”? 在Android studio中,自动遇见这个异常报错,如果eclipse会 ...
- Tex介绍
TeX, LaTeX, XeTeX, PdfTeX等等 TeX 是一种宏语言.就像别的语言有库一样,TeX 语言有宏的集合.这些宏,就是用这个语言写出来的东西,供大家共用的.TeX 有个最基本的宏集合 ...
- 概率法求解三阶幻方[C语言]
#include <stdio.h> #include <string.h> ]={,,,,,,,,}; ]; ][]; int sum(int su[]) { ; ;su[i ...
- 限制转交订单-采购直接批准PO
应用 Oracle Purchasing 层 Level Function 函数名 Funcgtion Name CUXPOXPOEPO 表单名 Form Name POXPOEPO 说明 Des ...
- cad移动图案
1.键盘按快捷键M,鼠标变成小方块,选中图案,右击,左击拖动图像 2.选中图像,键盘按m,拖动图像 3.选中图像,右击,图像移动
- flex4 日期类型字符串转日期类型(string转Date)(转)
mysql数据库中存储的日期类型通过PHP返回到flex端为字符串类型,这样在flex中进行处理时就必须要将字符串转化为Date类型.如果仅仅是 "年/月/日" 的组合,而没有涉及 ...
- java 多线程学习笔记
这篇文章主要是个人的学习笔记,是以例子来驱动的,加深自己对多线程的理解. 一:实现多线程的两种方法 1.继承Thread class MyThread1 extends Thread{ public ...
- iOS6和iOS7代码的适配(3)——坐标适配
由于iOS7里面status bar和视图是重叠在一起了,所以应用的y坐标就没法和以前一致了,需要重新计算设定.基本上,你的应用用Xcode5运行一下就能看见这个问题,这里写了一个最简单的例子,一个V ...