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 ...
随机推荐
- iOS下移除按钮原生样式
按钮样式,在 Android 手机浏览器中显示正常,但在 iOS Safari 浏览器中会看到按钮显示为圆角样式,设置 border-radius:0; 也不好使. 这是因为iPhone.iPad 设 ...
- HTMLのフォームの送信ボタンは、inputとbuttonでは機能的な違いがありますか?
(X)HTMLのフォームの送信ボタンは.inputとbuttonでは機能的な違いがありますか? <input type="submit" value="送信&quo ...
- Webpack 从0开始
Webpack Demos https://github.com/ruanyf/webpack-demos Docs https://webpack.github.io/docs/?utm_sourc ...
- WebRTC 音视频开发
WebRTC 音视频开发 webrtc Android IOS WebRTC 音视频开发总结(七八)-- 为什么WebRTC端到端监控很关键? 摘要: 本文主要介绍WebRTC端到端监控(我们翻译 ...
- 使用WinSetupFromUSB来U盘安装windowsXP(不使用win PE系统)
目前用U盘安装XP的多数方法都要借助WINPE,比较麻烦.使用WinSetupFromUSB只需要下载一个6.5MB的绿色软件就可以制作好windows xp的安装U盘,方便简捷. WinSetupF ...
- UltraISO制作U盘系统安装盘(图文教程)
虽然现在的系统盘做的越来越傻瓜化,安装方法也非常多,但是仍然时常有朋友询问怎么安装系统,特别是没有刻录机或不想刻盘,又不懂硬盘安装的朋友,这里特别介绍一种用U盘来安装系统的方法,非量产,量产因U盘芯片 ...
- Qt信号槽机制的实现(面试的感悟,猜测每一个类保存的一个信号和槽的二维表,实际使用函数指针 元对象 还有类型安全的检查设定等等)
因为面试时问了我这道题,导致我想去了解信号槽到底是如何实现的,于是贴着顺序看了下源码,大致了解了整个框架.网上关于信号槽的文章也很多,但是大部分都是将如何应用的,这里我就写一下我所理解的如何实现吧, ...
- Navicat for mysql 导出sql文件 导入sql文件
运行速度快 不受大小限制 安全高效
- NOI2012 Day2
NOI2012 Day2 迷失游乐园 题目描述:给出一个\(n\)个点的图,边数为\(n-1\)或\(n\).从某个点出发,每次等概率地随机选一个相连的并且没有经过过的点,直到不能走为止,问期望路径长 ...
- How to Type(dp)
How to Type Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Tota ...