テキストカルーセル（ブートストラップ4）に反応するl

Question

私は上記のこのコードを使用して、内部にテキストを含むカルーセルを作成しています。スマートフォンで画面を縮小したりウェブサイトを開いたりすると、テキストの位置がずれることがあります。誰かが私がする必要があることを知っていますか？私は多くのウェブサイトの例を探しましたが、私はこの問題に対する良い答えは見つかりませんでした。例えば

、テキストは次のようにある場合：

：MY SITE TO

WELCOME私はあなたが私は携帯電話で開いたサイズを変更したりすると、テキストはそれのようなものである

が来てくれてうれしいです

WE

L

C

OM

E

S

MY

TO

ITE

（...）

HTMLコードは非常によく似ていますの例 simple Carousel from the Bootstrap documentationと

/* CUSTOMIZE THE CAROUSEL 
 
    -------------------------------------------------- */ 
 
    
 
    /* Carousel base class */ 
 
    .carousel { 
 
     margin-bottom: 4rem; 
 
    } 
 
    /* Since positioning the image, we need to help out the caption */ 
 
    .carousel-caption { 
 
     z-index: 10; 
 
     bottom: 3rem; 
 
    } 
 
    
 
    /* Declare heights because of positioning of img element */ 
 
    .carousel-item { 
 
     height: 32rem; 
 
     background-color: #777; 
 
    } 
 
    .carousel-item > img { 
 
     position: absolute; 
 
     top: 0; 
 
     left: 0; 
 
     min-width: 100%; 
 
     height: 32rem; 
 
    } 
 
    
 
    
 
    
 
    
 
    /* RESPONSIVE CSS 
 
    -------------------------------------------------- */ 
 
    
 
    @media (min-width: 40em) { 
 
     /* Bump up size of carousel content */ 
 
     .carousel-caption p { 
 
     margin-bottom: 1.25rem; 
 
     font-size: 1.25rem; 
 
     line-height: 1.4; 
 
     } 
 
    
 
     .featurette-heading { 
 
     font-size: 50px; 
 
     } 
 
    } 
 
    
 
    @media (min-width: 62em) { 
 
     .featurette-heading { 
 
     margin-top: 7rem; 
 
     } 
 
    }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" /> 
 

 
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> 
 

 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script> 
 

 
<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> 
 
     <li data-target="#myCarousel" data-slide-to="2"></li> 
 
     </ol> 
 
     <div class="carousel-inner"> 
 
     <div class="carousel-item active"> 
 
      <img class="first-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="First slide"> 
 
      <div class="container"> 
 
      <div class="carousel-caption d-md-block text-left"> 
 
       <h1>Example headline.</h1> 
 
       <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> 
 
       <p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <div class="carousel-item"> 
 
      <img class="second-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Second slide"> 
 
      <div class="container"> 
 
      <div class="carousel-caption d-md-block"> 
 
       <h1>Another example headline.</h1> 
 
       <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> 
 
       <p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <div class="carousel-item"> 
 
      <img class="third-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Third slide"> 
 
      <div class="container"> 
 
      <div class="carousel-caption d-md-block text-right"> 
 
       <h1>One more for good measure.</h1> 
 
       <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> 
 
       <p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <a class="carousel-control-prev" href="#myCarousel" 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" href="#myCarousel" role="button" data-slide="next"> 
 
     <span class="carousel-control-next-icon" aria-hidden="true"></span> 
 
     <span class="sr-only">Next</span> 
 
     </a> 
 
    </div>

Answer 1

スタート：4公式サイトブートストラップ。使用している例には、さまざまなカスタマイズがあり、「ブートストラップとCSSの知識が基本的」であれば混乱するかもしれません。