Question

我正在尝试在三列背景中显示图像的全宽。我想如果我将三个列包裹在一个div中并在div上放置一个背景，它就会发生，但它没有显示出来。

这是我的bootply： http://www.bootply.com/BT0SWRh3aq

这是我的代码：

                <div id="bg-pink-data-points">
            <div class="col-md-4 col-xs-12">
                <h3>RESEARCH</h3>
                <p>The systematic investigation into and study of materials and sources in order to establish facts and reach new conclusions</p>
            </div>
            <div class="col-md-4 col-xs-12">
                <h3>WRITE</h3>
                <p>Mark (letters, words, or other symbols) on a surface, typically paper, with a pen, pencil, or similar implement.</p>
            </div>
            <div class="col-md-4 col-xs-12">
                <h3>DISCOVER</h3>
                <p>In order to protect access to your account, we need to know who you are. Please provide details about the Primary cardmember as well as your Discover card</p>
            </div>
                </div>

这是css：

    #bg-pink-data-points {
    background: url(https://www.planwallpaper.com/static/images/Wallpapers-for-Background-HD-Wallpaper-1080x607.jpg) no-repeat center center;
    background-size: cover;
}

Answer 1

没有为div分配任何高度值。您可以将其设置为固定高度，或者我建议稍微更改css并添加包装类，如row或col-xs-12。

CSS更改：


     #bg-pink-data-points {
            background-image: url("https://www.planwallpaper.com/static/images/Wallpapers-for-Background-HD-Wallpaper-1080x607.jpg");
            background-size: cover;
        }

HTML更改：


    div class="row" id="bg-pink-data-points">

Bootstrap图像未显示在三列

1 个答案: