在超大屏幕中并排放置三张背景照片

Question

我有以下代码可以将三张背景照片并排放置。我不确定为什么超大屏幕上没有显示任何内容。能否请您提示我找出可能的原因是什么？

<div class="jumbotron jumbotron-fluid" style=" margin-top: 90px; ">
    <div class="container text-sm-center p-y-3">

        <div class="col-lg-3  col-md-3 col-sm-3" style=" background: url('./assets/img/glass.jpg'); background-repeat: no-repeat; background-size:contain ">

        </div>


        <div class="col-lg-6  col-md-6 col-sm-6" style="background: url('./assets/img/mhacks.jpg'); background-repeat: no-repeat;  background-size:contain ">

        </div>


        <div class="col-lg-3  col-md-3 col-sm-3" style="background: url('./assets/img/rift.jpg'); background-repeat: no-repeat; background-size:contain ">

        </div>

    </div>
</div>

Answer 1

您还没有为您的三个 div 设置身高。使用 background 时，您需要为要为其提供背景的 div 设置高度。

Answer 2

因为你的div里面没有任何内容，如果你只想要div里面的图片，你可以这样做：

<div class="jumbotron jumbotron-fluid" style=" margin-top: 90px; ">
    <div class="container text-sm-center p-y-3">

        <div class="col-lg-3  col-md-3 col-sm-3">
            <img src="./assets/img/glass.jpg" class="img-responsive" style="width:100%; height:auto"/>
        </div>
        <div class="col-lg-6  col-md-6 col-sm-6">
            <img src="./assets/img/mhacks.jpg" class="img-responsive" style="width:100%; height:auto"/>
        </div>
        <div class="col-lg-3  col-md-3 col-sm-3">
            <img src="./assets/img/rift.jpg" class="img-responsive" style="width:100%; height:auto"/>
        </div>

    </div>
</div>

在超大屏幕中并排放置三张背景照片

Juxtaposing three background photos next to each other in jumbotron

css

col

background-image

twitter-bootstrap