如何在Bootstrap Carousel轮播组件中将图片设置为左对齐

Bootstrap轮播组件默认会给轮播内的图片设置margin: 0 auto实现居中效果，你可以通过以下两种方法修改为左对齐：

方法1：自定义CSS样式（全版本兼容） #

在你的样式表中添加以下代码即可，指定了你的轮播IDtestslider不会影响站点内其他轮播组件：

#testslider .carousel-item {
  text-align: left;
}
#testslider .carousel-item img {
  margin-left: 0;
  /* 如果是行内块显示的图片可以加下面这行 */
  display: inline-block;
}

方法2：使用Bootstrap自带工具类（适合Bootstrap 4.3及以上/5版本） #

直接给轮播内的img标签添加Bootstrap原生的左外边距清零工具类ms-0即可，无需额外写CSS，修改后的代码片段如下：

<img src="<?php echo $visuel['url']; ?>" alt="<?php the_field( 'texte_alternatif' ); ?>" class="ms-0" />

注意事项 #

如果你的图片设置了width: 100%占满整个轮播容器，左对齐和居中的视觉效果没有差异，仅当图片实际宽度小于轮播容器宽度时对齐效果会体现。

内容的提问来源于stack exchange，提问作者microb14