Question

好的，使用最新版本的Bootstrap

尝试将我的ROR应用程序中的列设置为背景颜色。

这是代码（它在HAML中）

.row.testing
  .col-lg-2
    = render 'blah/blah_testing/
    = yield :sidebar
  .col-lg-10
    = yield

我试图让col-lg-2列完整地显示背景颜色，而不管有多少行，否则它会在最后一行停止时停止。

高度是动态的。宽度由bootstrap设置。而且我不认为我可以使用表格设置来设置列的背景，因为这似乎依赖于固定的测量值？

修改

广泛简化了这个问题。

Answer 1

而不是高度：100％使用视口高度。您可以使用高度：列的100％，但您必须在CSS中将正文的高度设置为100％。这很麻烦，一旦我发现了Viewport Units，我就没用过它了。

或者如上所述，你可以使用一些名为vh的新CSS元素（做一个快速谷歌的“CSS vh单位”，如果你想阅读更多，你会得到更好的解释。[那里如果您进一步阅读，可以找到其他视口测量值]）无论如何，对于你的行，给它一个ID，让我们说id="myRow"然后在CSS中将它的高度设置为height: 100vh

一个VH单位等于屏幕尺寸的1％。所以100vh将是全屏高度，50vh将是半屏高度。（这个单元是 - 动态的 - 但是我相信到目前为止只有当前版本的Firefox已经内置了支持......但是请不要引用我，因为我读了Viewport测量文档已经有一段时间了。）

这是一个方便的链接/解释 https://css-tricks.com/viewport-sized-typography/

Twitter Bootstrap列背景颜色

1 个答案: