Проблема создания отзывчивой BootStrap 4 Карусели - PullRequest
Новая
       25

Проблема создания отзывчивой BootStrap 4 Карусели

0 голосов
/ 02 мая 2020

Независимо от того, что я делаю, вместо изменения размера изображения / содержимого в карусели в браузере есть полоса прокрутки. Таким образом, чтобы увидеть всю картину, пользователи должны прокрутить. Вот мой код: 

<!-- 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>

Кроме того, я уже пытался использовать решение, предоставленное { ссылка }

Это просто не работает! Более того, даже если я добавлю приведенный там пример кода: 

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

Это также делает прокрутку на ОДНОЙ странице прокручиваемой, поэтому проблема заключается не только в изображении, но в том, что все, что я помещаю в карусель, не отвечает должным образом , Проще говоря, почему содержимое карусели не помещается в окно без полосы прокрутки, особенно если я использую рабочий стол ??

...