引导转盘标题文本没有响应，无法定位在左侧你好，世界！ html，正文{ 位置：相对位置；_Html_Css_Bootstrap 4

引导转盘标题文本没有响应，无法定位在左侧你好，世界！ html，正文{ 位置：相对位置；

html css bootstrap-4

引导转盘标题文本没有响应，无法定位在左侧你好，世界！ html，正文{ 位置：相对位置；,html,css,bootstrap-4,Html,Css,Bootstrap 4,} .carousel标题{ 位置：绝对位置；顶部：113px；左：150px； } .旋转木马内部img{ 宽度：100%；身高：100%； } LOREM/IPSUM 普遍的洛勒姆知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作。全新的洛勒姆乱数假文多洛v9 在这里！知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作。我是Bootstrap4

}

.carousel标题{
位置：绝对位置；
顶部：113px；
左：150px；
}
.旋转木马内部img{
宽度：100%；
身高：100%；
}




LOREM/IPSUM
普遍的


洛勒姆
知识是一种美德，是一种美德，是一种美德，是一种美德。
但是，在最低限度上，我们需要一个实验室来进行日常工作。
全新的
洛勒姆


乱数假文


多洛v9
在这里！
知识是一种美德，是一种美德，是一种美德，是一种美德。
但是，在最低限度上，我们需要一个实验室来进行日常工作。

我是Bootstrap4的新手，我面临一个特殊的问题。我的案例中的旋转木马标题将显示在左侧。在桌面模式下，我尝试了绝对定位，它显示得很好。但当我为手机设置响应模式时，它显示出非常奇怪的效果。我已经给出了这些的截图

所以，我的问题是，我是否必须为位置和字体编写媒体查询，还是bootstrap会处理它。任何人都可以在这方面指导我，或者至少展示一个片段，说明如何对所有屏幕大小做出响应。这将是巨大的帮助。

当您使用position:absolute时您需要确保您的类有一个父类，并且它有属性position relative，这就是position绝对值的工作方式。请使用此选项

    .carousel-caption {
position: absolute;
top:113px;
left:150px;
}

     .carousel-inner img {
  width: 100%;
  height: 100%;
}
</style>
</head>
<body>


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

      <!-- Indicators -->
      <ul class="carousel-indicators">
        <li data-target="#demo" data-slide-to="0" class="active"></li>
        <li data-target="#demo" data-slide-to="1"></li>
      </ul>

      <!-- The slideshow -->
      <div class="carousel-inner">
        <div class="carousel-item active">

          <img src="./images/ibm commerce background.png" alt="" width="" height="">
          <div class="carousel-caption">
              <h3 class="text-left">LOREM / IPSUM</h3>
              <h2 class="text-left">UNIVERSAL
                <br>
                LOREM
              </h2>

              <h3 class="text-left">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.

              </h3>
          </div>

        </div>
        <div class="carousel-item">
          <img src="./images/ibm commerce.png" alt="" width="" height="">
          <div class="carousel-caption">
              <h3 class="text-left">THE ALL NEW</h3>
              <h2 class="text-left">LOREM
                <br>
                IPSUM
                <br> 
                DOLOR v9</h2>
              <h3 class="text-left">IS HERE !</h3>
              <h3 class="text-left">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. </h3>
          </div>
        </div>
      </div>

      <!-- Left and right controls -->
      <a class="carousel-control-prev" href="#demo" data-slide="prev">
        <span class="carousel-control-prev-icon"></span>
      </a>
      <a class="carousel-control-next" href="#demo" data-slide="next">
        <span class="carousel-control-next-icon"></span>
      </a>
    </div>


<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>

将img流体类添加到旋转木马可能会有所帮助

来源：

添加此项，以使您的文本具有响应性：

.carousel-item .img-fluid {
  width:100%;
  height:100%;
}

并将其添加到您的

中，它将使您的图像具有响应性

.carousel-caption {
position: absolute;
top:113px;
left:0;
width:100%;
Text-align:left;
}

.carousel-item .img-fluid {
  width:100%;
  height:100%;
}

.carousel-caption h3{
  font-size: 6vw;
}
.carousel-caption h2{
  font-size :2vw;
}