Question

我正在使用bootstrap4，我在旋转木马中的图像被压扁了。它之前工作正常但是当我更新CDN时，旋转木马也发生了变化。两个版本之间的代码可能没有任何不同，因为当我更新到与新CDN匹配的新轮播代码时，出现了同样的问题。

   <!--carousel-->
  <div class="container-fluid"> <div id="carouselExampleIndicators" 
class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner" role="listbox">
<div class="carousel-item active">
  <img class="d-block img-fluid" src="images/trend board - 1.jpg" alt="First slide">
</div>
<div class="carousel-item">
  <img class="d-block img-fluid" src="images/trend board - 2.jpg" alt="Second slide">
</div>
<div class="carousel-item">
  <img class="d-block img-fluid" src="images/trend board - 3.jpg" alt="Third slide">
</div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
  </a>
</div>
</div>


<!--CDN-->
<!--bootstrap 4 beta-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

Answer 1

我的猜测是src标记上的img属性存在问题。这些必须是有效的URL，并且由于它们具有空格，因此这些属性不会被视为有效。这是指向该特定问题的另一个stack overflow question的链接。

我将一个codeply project与来自bootstrap 4 beta的轮播放在一起。当您在src属性中放置有效的URL时，一切都按预期工作。

bootstrap4轮播图像压扁

1 个答案: