leo*_*nel 2 css ruby ruby-on-rails twitter-bootstrap twitter-bootstrap-rails
Twitter Bootstrap网站内容如下:
默认和简单的940px宽,居中布局,适用于由单个网站或页面提供的任何网站或页面
<div class="container">
.
引自http://twitter.github.com/bootstrap/scaffolding.html#layouts
这正是我在HTML中所拥有的,但当我检查元素时,我看到这个CSS适用于它:
.container, .navbar-fixed-top .container, .navbar-fixed-bottom .container {
width: 1170px;
}
Run Code Online (Sandbox Code Playgroud)
顺便说一句,如果我通过添加...来覆盖CSS规则
div.container{
width:940px;
}
Run Code Online (Sandbox Code Playgroud)
然后div.container中的元素比div.container本身更宽,看起来不合适.
那么,为什么Twitter Bootstrap"固定"布局不固定?以及如何修复它?
在更新版本的bootstrap中,从2.1.0开始(我认为)你可以修改响应式网格大小variables.less
:github上的source
因此,如果您从Less编译CSS,则可以修改这些变量.否则,以下解决方案仍然有效.
如果你看看这个文件github responsive-1200px-min.less(2.0.4)或github responsive-1200px-min.less(2.1.0)
你可以看到
@gridColumnWidth: 70px; // First parameter
@gridGutterWidth: 30px; // Second parameter
Run Code Online (Sandbox Code Playgroud)
这给了70*12 + 30*(12-1) = 1170px
(12是@gridColumns
).
因此,如果您需要静态,无响应,940px宽的网格,则必须bootstrap-reponsive.css
从包含中删除该文件.
至于RoR等价物,任何输入都是值得赞赏的.