【问题标题】:How to put background-image within col-md如何将背景图像放在 col-md 中
【发布时间】:2014-03-26 22:27:19
【问题描述】:

为了澄清我的问题,我将附上下面的草图:

我想使用 twitter-bootstrap 将背景图像放入 col-md 中。主要的问题是如何将它放在 col-md-7 中。它的必要条件是图像必须在所有以 col-md-7 为目标的地方都可见,并且包括 100% 的高度。

我是 twitter-bootstrap 的初学者,我不确定 col-md 类是否会将其高度拉伸到页面底部。如果不是,使用引导程序解决这个问题的解决方案是什么?

在我的代码下面:

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;
}

我希望已提供解决此问题所需的所有信息。如果缺少什么,请告诉我,我会尽快提供。

最好的问候。

【问题讨论】:

    标签: twitter-bootstrap twitter-bootstrap-3


    【解决方案1】:

    http://www.bootply.com/125213

    任何带有背景图片的 DIV 容器也需要 100% 高度(body、html、.container-fluid 等)

    html,body {
        height:100%;
    }
    
    .container-fluid,.col-md-7,.row {
        height:100%;
    }
    

    另外,Bootstrap 3 中没有 row-fluid

    【讨论】:

    • 它对我很有用,但我还有一个问题。更改 twitter-bootstrap 类的标准值不会干扰其他页面?还是只是在主页上更改?谢谢。
    猜你喜欢
    • 2018-01-24
    • 1970-01-01
    • 1970-01-01
    • 2014-01-10
    • 2023-03-23
    • 2019-06-20
    • 1970-01-01
    • 1970-01-01
    • 2019-08-12
    相关资源
    最近更新 更多