Bootstrap 4 轮播答案

【问题标题】：Bootstrap 4 carouselBootstrap 4 轮播
【发布时间】：2017-03-23 21:55:23
【问题描述】：

Bootstrap 4 的轮播出现异常问题，它工作正常，然后我一定在某处更改了某些内容，尝试删除它并出现同样的问题。我的箭头位置不对see image

<body>
<ul class="nav justify-content-center">
  <li class="nav-item">
    <a class="nav-link" href="index.html">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link active" href="landmarks.html">Landmarks</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="images.html">Image Gallery</a>
  </li>
</ul>

<div class="container" align="center">
    <h1 class="display-5">Gallery</h1>
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner" role="listbox">
<div class="carousel-item active">
  <img class="d-block img-fluid" src="beach.jpg" alt="First slide">
</div>
<div class="carousel-item">
  <img class="d-block img-fluid" src="lake.jpg" alt="Second slide">
</div>
<div class="carousel-item">
  <img class="d-block img-fluid" src="martyrsquare.jpg" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls"  role="button"  data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>

我所拥有的少量 css 不会影响任何这些，但以防万一

.row{
    padding: 20px;
}

body{
    background-color: #e5e5e5;
}

【问题讨论】：

每张图片都会出现这种情况吗？
@DavidLee 是的，但仅限于轮播中
This answer 帮我解决了类似的问题

标签： html css bootstrap-4

【解决方案1】：

箭头似乎在正确的位置。似乎是您的图像大小导致它看起来不合适。

尝试将以下类添加到您的 css 中。

.carousel-item img {
    width: 100%;
}

【讨论】：

这似乎已经修复了它，但现在图像在较低的窗口尺寸下拉伸了高度
我认为您在 img 高度上设置了硬编码值。您愿意在图像的两侧留出空间吗？
没有硬编码 img 高度的值，不希望在边上有空间
您能否再发一张该问题的图片，因为我无法理解现在发生的事情
只是为了澄清这只是通过缩小 chrome 窗口