Question

<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<title>Hello, world!</title>
<style>

    html,body{

position: relative;

}

    .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>

我是Bootstrap 4的新手，我面临一个特殊的问题。在我的情况下，轮播字幕将显示在左侧。在桌面模式下，我尝试了绝对定位，并且显示效果很好。但是当我为移动设备执行响应模式时，它显示得很奇怪。我已经给出了这些截图。

所以我的问题是我是否必须针对位置和字体编写媒体查询，否则将进行引导。任何人都可以在这方面为我提供指导，或者至少向摘要展示如何针对所有屏幕尺寸进行响应。这将是巨大的帮助。

Answer 1

使用位置时：绝对您需要确保您的班级有一个家长班，并且有相对位置的属性，这就是位置绝对工作的方式

Answer 2

请使用此。

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

Answer 3

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

将img-fluid类添加到轮播中可能会有所帮助。

来源：https://bootstrapcreative.com/create-full-width-bootstrap-4-responsive-carousel/

Answer 4

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

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

并将其添加到您的<img class="w-100" src="...">中，它将使您的图像具有响应性。

Bootstrap Carousel Captions文本无响应，无法放置在左侧

4 个答案: