尝试设置旋转木马中的文本，使其仅跨越半个屏幕，使文本居中

Question

我有一个Bootstrap carousel，带有carouse-item作为黑引号。目前，它工作得非常好。我把它放在jumbotron中，因为它的填充和背景颜色。我希望实现的是简单地将文本显示在屏幕的中央，宽度为of lg-6，of xs-12，但仍然将文本保留在中间。现在，如果你看一下链接，它是col 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