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

Question

我有一个 Bootstrap 轮播，轮播项目作为黑引号。目前它工作得很好。由于填充和背景颜色，我将它保存在超大屏幕中。我希望实现的只是让文本出现在屏幕中央，宽度为 col-lg-6、col-xs-12，但仍将文本保持在中间。现在，如果您查看 link，它是 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

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

Trying to set the text in the carousel so it spans only half the screen, keeping the text in the center

carousel

bootstrap-4