尝试在 Google 协作平台的 Boostrap 图片轮播中居中图片

Question

问题的图片

尝试修复代码，以便此引导轮播中的六张图像都以我的(新版本(Google网站为中心显示，而不是像屏幕截图中那样被推到顶部。将不胜感激。代码在这里

Answer 1

几件事：

• 轮播中的图片在灰色边框下有一个棕金色的条，这会让访问者失望......所以你可能需要裁剪图像
• 我用粉红色替换了容器类的背景，以便我们更容易检查图像周围的间距
• 我添加了 2% 的底部，以便我们可以看到粉红色背景，您可以根据需要进行调整

工作片段：

body {
box-sizing: border-box;
}
.container {
background-color: pink;
padding: 2%;
}
.carousel-inner {
height: 100%;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div class="container">
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<a href="http://www.ashdownhouse.com">
<img src="https://drive.google.com/uc?export=view&id=1HIkliSgbwTyE2jm0VTKovz-0sL-MvtY5" class="d-block w-100" alt="..." />
</a>
</div>
<div class="carousel-item">
<a href="http://www.barfieldschool.com">
<img src="https://drive.google.com/uc?export=view&id=1D6CYYSJ5RmFTss_Uwtz26Yp4iDbzjPGx" class="d-block w-100" alt="..." />
</a>
</div>
<div class="carousel-item">
<a href="http://www.chandlings.org.uk">
<img src="https://drive.google.com/uc?export=view&id=1sjJbhxr-BlqGFMynCwvoyjxsv9QgizKi" class="d-block w-100" alt="..." />
</a>
</div>
<div class="carousel-item">
<a href="http://www.cothill.net">
<img src="https://drive.google.com/uc?export=view&id=1_uoO1czc3U1y-Yzl7Bl6-Ue7LhgcX8HL" class="d-block w-100" alt="..." />
</a>
</div>
<div class="carousel-item">
<a href="http://www.kitebrookhouse.com">
<img src="https://drive.google.com/uc?export=view&id=17l0qy3JT6tt_O-fte7P11nMipqifhvg2" class="d-block w-100" alt="..." />
</a>
</div>
<div class="carousel-item">
<a href="http://www.mowdenhall.co.uk">
<img src="https://drive.google.com/uc?export=view&id=1XFeNIUl1ZoWq1Ph_6siVM0bV0yxf0X3P" class="d-block w-100" alt="..." />
</a>
</div>
<div class="carousel-item">
<a href="http://www.sauveterre.net">
<img src="https://drive.google.com/uc?export=view&id=10XrCAUh9c4RSnoD0pjkdNl0PXV0whST2" class="d-block w-100" alt="..." />
</a>
</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>