ブートストラップカルーセルのテキストの周囲にボックスコンテナを作成しようとしています

Question

以下に示すカルーセル用の画像の上にテキストがあります。

私は読みやすいように、いくつかの不透明度とテキストの周りにボックスを追加します。私はいくつかのことを試しましたが、ボックスはスケールが下がり始めると変な形をとります。これは私が得るものです

.caption-one { 
     background-color: #282828; 
     opacity: 0.75; 
     padding-left: 2%; 
     margin-right: 38%; 
     padding-bottom: 2%; 
     width: 40%; 
} 

そして：私の最初の画像は、私は以下のCSSを適用している私のクラス.caption-oneについては

<!-- Carousel --> 
<header id="myCarousel" class="carousel slide carousel-fade" data-ride="carousel"> 
    <!-- Indicators --> 
    <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> 

    <!-- Wrapper for Slides --> 
    <div class="carousel-inner" role="listbox"> 
     <div class="item active"> 
      <!-- Set the first background image using inline CSS below. --> 
      <img src="img/golden_egg3.jpg" class="img-responsive first-slide" alt="First slide"> 
       <div class="container"> 
        <div class="carousel-caption"> 
         <div class="caption-one"> 
          <h1>The right Wealth Advisor can make a big difference.</h1> 
          <br> 
          <a href="contact.html" class="btn btn-primary btn-lg hvr-underline-from-left" role="button">Learn More</a> 
         </div> 
        </div> 
       </div> 
     </div> 

     <div class="item"> 
      <!-- Set the first background image using inline CSS below. --> 
      <img src="img/graph_in_hand3.jpg" class="img-responsive second-slide" alt="Second slide"> 
       <div class="container"> 
        <div class="carousel-caption"> 
         <div class="caption-two"> 
          <h1>Personal Wealth Planning is not<br> just charts and graphs, it's about<br> taking control of your financial future.</h1> 
          <a class="btn btn-lg btn-primary hvr-underline-from-left" href="contact.html" role="button">Learn More</a> 
         </div> 
        </div> 
       </div> 
     </div> 

     <div class="item"> 
      <!-- Set the first background image using inline CSS below. --> 
      <img src="img/jar_with_coins3.jpg" class="img-responsive third-slide" alt="Third slide"> 
       <div class="container"> 
        <div class="carousel-caption"> 
         <div class="caption-three"> 
          <h1>Successful investing takes<br> time, discipline and patience.</h1> 
          <a class="btn btn-lg btn-primary hvr-underline-from-left" href="contact.html" role="button">Learn More</a> 
         </div> 
        </div> 
       </div> 
     </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> 
</header> 

：ここ

は私のカルーセルのための私のhtmlです

大丈夫だが確かにc ouldは良くなる。ここでは、携帯電話上にある：

さらに悪いです。私はコンタクトページにこの同じボタンを使用するので、私のボタンがとても大きい理由を知りません。とてもうまくスケールされます。どんな助けでも大歓迎です。

Answer 1

私はあなたのコードにいくつかの変更を加えました。

.carousel-caption{ 
 
     background-color: #282828; 
 
     opacity: 0.75; 
 
} 
 
@media(max-width: 768px){ 
 
    h1{ 
 
    font-size: 14px; 
 
    } 
 
}

<div class="container"> 
 
    <div class="carousel-caption"> 
 
    <h1>The right Wealth Advisor can make a big difference.</h1> 
 
    <br> 
 
    <a href="contact.html" class="btn btn-primary btn-lg hvr-underline-from-left" role="button">Learn More</a> 
 
    </div> 
 
</div>