创建一个响应式的BootStrap 4 Carousel的问题。

问题描述 投票:0回答:1

无论我怎么做,浏览器都没有让carousel中的imageeconent调整大小,而是有一个滚动条。所以要想看到整个图片,用户必须滚动。这是我的代码。

<!-- carousel from: https://www.w3schools.com/bootstrap4/bootstrap_carousel.asp; pics from: https://pixabay.com/-->
<div id="demo" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ul class="carousel-indicators">
    <li data-target="#demo" data-slide-to="0" class="active"></li>
    <li data-target="#demo" data-slide-to="1"></li>
    <li data-target="#demo" data-slide-to="2"></li>
    <li data-target="#demo" data-slide-to="3"></li>
  </ul>

  <!-- The slideshow -->

  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="object-fit" src="{{URL::asset('images/starry-night.jpg')}}"  alt="Astronomy">
    </div>
    <div class="carousel-item">
      <img class="object-fit" src="{{URL::asset('images/bacteria.jpg')}}" alt="Biology">
    </div>


    <div class="carousel-item">
      <img class="object-fit"  src="{{URL::asset('images/economy.jpg')}}"  alt="Economics">
    </div>
    <div class="carousel-item">
      <img class="object-fit"  src="{{URL::asset('images/cs.jpg')}}"  alt="Computer Science">
    </div>
  </div>

  <!-- Left and right controls -->
  <a class="carousel-control-prev" href="#demo" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </a>
  <a class="carousel-control-next" href="#demo" data-slide="next">
    <span class="carousel-control-next-icon"></span>
  </a>

</div>
    </body>

另外,我已经尝试过使用以下的解决方案 https:/stackoverflow.coma1635666513451221。

它就是不工作! 此外,即使我添加了里面提供的代码示例。

<div class="carousel slide" data-ride="carousel">
      <div class="carousel-inner bg-info" role="listbox">
            <div class="carousel-item active">
                <div class="d-flex align-items-center justify-content-center min-vh-100">
                    <h1 class="display-1">ONE</h1>
                </div>
            </div>
      </div>
</div>

这也使得唯一的一个页面可以滚动,所以问题不只是图片,而是我放在旋转木马中的任何东西都没有很好的反应。简单地说,为什么旋转木马的内容不适合放在窗口中而不做滚动条,特别是当我使用桌面时?

laravel bootstrap-4 carousel
1个回答
© www.soinside.com 2019 - 2024. All rights reserved.