html - Bootstrap 4 轮播

标签 html css bootstrap-4

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

最佳答案

箭头似乎在正确的位置。似乎是您的图片尺寸导致它看起来不合适。

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

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

关于html - Bootstrap 4 轮播,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42987724/

相关文章:

css - 为什么这些列垂直堆叠而不是水平 bootstrap 4

html - ="class"的标签

iphone - 最大宽度对 iPhone 没有影响

css - iframe 重叠 div 问题

javascript - OnClick JS If 语句

bootstrap-4 - 无法在 Reactstrap Navbar 组件中使用 Bootstrap 类

javascript - 用灰色覆盖整个 html 页面以指示临时禁用

javascript - 追加不适用于将文本追加到元素

javascript - 固定背景图像水平连接到固定宽度的内容

css - 如何在小型设备上渲染 Bootstrap 4 表格?