我对CSS和Bootstrap比较陌生。我试图在圆盘传送带下显示对齐的文本，并在所有屏幕尺寸上将文本页边距与图像的左右边缘对齐。每个图像为886××460像素。当我尝试carousel-caption时，它覆盖了图像，使多余的文本卡在其上方的空间中，并且文本的页边距未与图像对齐。

这可能是一个幼稚的问题，但是还有其他一些相关的CSS类可以用来确定任何给定屏幕尺寸的图像的实际大小，以便可以将文本边距与图像的左右边缘对齐吗？

下面是我使用carousel-caption的代码示例。

<div class="container-fluid px-0">

    <div id="myCarousel" class="carousel slide" data-ride="carousel">

    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
    </ol>

        <div class="carousel-inner" role="listbox">
            <div class="flex-grow-0 item active">
                <img class="img-fluid" src="images/pic-1.jpg" alt="ex.1">              
            </div>
            <div class="flex-grow-0 item">
                <img class="img-fluid" src="images/pic-2.jpg" alt="ex.2">
            </div>    
        </div>


        <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>

    </div>
    <div class="carousel-caption" style="font-size: 12px; color:#FFFFFF; text-align:justify">
    <h4>Blog</h4>
               <p>Lorem ipsum dolor sit amet,consectetur adipiscing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
</div>