Question

嗨我有一个看起来像我想要的网页布局，但图像没有响应。一列有一段文字，另一列有幻灯片。如果我使用class="img-circle"，它会使图像比我想要的小。当我使窗口变小时，它会切掉一些图像。我怎样才能让他们做出回应？我试图使用旋转木马自举，但我不能让它们并排排列。

 $(".slideshow > div:gt(0)").hide();

        setInterval(function () {
            $('.slideshow > div:first')
                .fadeOut(1000)
                .next()
                .fadeIn(1000)
                .end()
                .appendTo('.slideshow');
        }, 4000);

 .slideshow {
            margin: 45px auto;
            position: relative;
            width: 490px;
            height: 320px;
            padding: 10px;
            /*box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);*/
        }

            .slideshow > div {
                position: absolute;
                top: 10px;
                left: 10px;
                right: 10px;
                bottom: 10px;
            }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>




 <div class="container">
            <div class="d-inline h3">orem ipsum dolor </div>
            <div class="d-inline h3 float-lg-right"><a  href="/home/heritageprojects">orem ipsum dolor </a></div>
            <div class="row mb-5">
                <div class=" col-sm-5 col-md-4 col-lg-8 px-0 px-xl-4 mx-auto">
                    <p class="text-justify">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dapibus feugiat leo. Donec tristique consequat odio vel imperdiet. Mauris efficitur a sapien et interdum. Morbi lacinia, justo quis pulvinar condimentum, nibh turpis vestibulum nulla, nec facilisis nisl ex et ipsum. Pellentesque maximus, ligula in dictum blandit, lectus est sodales nisi, ac tempor ante tellus eu turpis. Nam vulputate augue ut accumsan egestas. Donec efficitur, lectus ut aliquam viverra, nisl sem.
                    </p>
                </div>
                <div class="col-lg-4 col-sm-12 col-xs-12 slideshow">
                    <div>
                        <img src="https://placeimg.com/420/320/arch">
                    </div>
                    <div>
                        <img src="https://placeimg.com/420/320/nature">
                    </div>
                    <div>
                        <img src="https://placeimg.com/420/320/tech">.
                    </div>

                </div>
            </div>
      </div>

Answer 1

使用img-fluid标记中的引导类img。

https://getbootstrap.com/docs/4.0/content/images/

使滑块图像响应Bootstrap

1 个答案: