尝试在轮播中设置文本，使其仅跨越屏幕的一半，将文本保持在中心

Question

我有一个 Bootstrap 轮播，带有 carouse 项目作为黑引号。目前它工作正常。我把它放在巨型屏幕上，因为填充和背景颜色。我希望实现的是简单地让文本出现在屏幕中央，具有col-lg-6，col-xs-12的宽度，但仍将文本保持在中间。现在，如果你看一下链接，它是col-lg-6，但文本一直出现在左边。

这是代码：

https://www.codeply.com/go/xulwussWF3

Answer 1

您可以在

col-lg-6上使用mx-auto...

<div id="carouselContent" class="carousel slide col-lg-6 mx-auto" data-ride="carousel">
     <div class="carousel-inner" role="listbox">
          ...
     </div>    
</div>   

此外，最好使用 w-50 而不是 col-lg-6，因为您没有使用网格行。

 <div id="carouselContent" class="carousel slide w-50 mx-auto" data-ride="carousel">
     <div class="carousel-inner" role="listbox">
          ...
     </div>    
</div>   

使用负边距为箭头留出更多空间...

   <a class="carousel-control-prev ml-n5" href="#carouselContent" 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 mr-n5" href="#carouselContent" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
   </a>

https://www.codeply.com/go/ZBwaLzuGT7