Question

我有一个Bootstrap轮播，其中的轮播项目用黑引号表示。目前，它运行良好。由于填充和背景颜色的原因，我将其保留在巨型飞船中。我希望实现的只是将文本显示在屏幕中央，宽度为col-lg-6，col-xs-12，但仍将文本保留在中间。现在，如果您查看链接，它是col-lg-6，但文本一直显示在左侧。

这里是代码：

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

Answer 1

您可以在mx-auto ...上使用col-lg-6 ...

<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

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

1 个答案: