作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
为了澄清我的问题,我将附上下面的草图:
我想使用 twitter-bootstrap 将背景图像放在 col-md 中。主要的问题是如何将它放入 col-md-7 中。它的必要条件是图像必须在所有指向 col-md-7 的地方可见,并且包括 100% 的高度。
我是 twitter-bootstrap 的初学者,我不确定 col-md 类是否可以将它的高度拉伸(stretch)到页面底部。如果不是,使用 bootstrap 解决这个问题的解决方案是什么?
在我的代码下面:
index.html.erb
<div class="container-fluid">
<div class="row-fluid">
<div class="col-md-7">
<div class="container-fluid css_image_home"></div>
</div>
<div class="col-md-5">
...
</div>
</div>
</div>
home.css.scss
div.css_image_home{
position:absolute;
background:url('images/wordcloud.jpg') no-repeat top left fixed;
}
我希望已提供解决此问题所需的所有信息。如果缺少什么,请告诉我,我会尽快提供。
最好的问候。
最佳答案
任何带有背景图片的 DIV 容器也需要 100% 高度(body、html、.container-fluid 等)
html,body {
height:100%;
}
.container-fluid,.col-md-7,.row {
height:100%;
}
此外,Bootstrap 3 中没有 row-fluid
。
关于twitter-bootstrap - 如何将背景图像放在 col-md 中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22674359/
我是一名优秀的程序员,十分优秀!