コンテナの外側にあるブートストラップカルーセルのキャプション

Question

イメージコンテナの外にキャプションを横に置く方法はありますか？私はを.carousel-captionに追加しようとしましたが、これは画像の下に置きたい場合にのみ機能します。また、overflow: visibleを.carousel-innerに追加しようとしましたが、これが動作している間は、スライドが変わるたびに、他の画像も背景に表示されます。

今私はそれを配置するのにposition: absoluteをやっているだけですが、あなたが見ることができるように、キャプションはイメージコンテナによって切り取られます。

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

       <!-- Wrapper for slides --> 
       <div class="carousel-inner" role="listbox"> 
        <div class="item active"> 
         <img class="img-responsive" src="images/banner-img.jpg" alt="Banner"> 
         <div class="carousel-caption"> 
          <h3>Lorem Ipsum dolor Sit Amet</h3> 
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Ut enim ad minim veniam</p> 
          <img src="images/divider.png" alt="Divider"> 
          <p class="posted">Posted by MrDoom on April 15, 2011</p> 
         </div> 
        </div> 

        <div class="item"> 
         <img class="img-responsive" src="images/banner-img.jpg" alt="Banner"> 
         <div class="carousel-caption"> 
          <h3>Lorem Ipsum dolor Sit Amet</h3> 
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Ut enim ad minim veniam</p> 
          <img src="images/divider.png" alt="Divider"> 
          <p class="posted">Posted by MrDoom on April 15, 2011</p> 
         </div> 
        </div> 

        <div class="item"> 
         <img class="img-responsive" src="images/banner-img.jpg" alt="Banner"> 
         <div class="carousel-caption"> 
          <h3>Lorem Ipsum dolor Sit Amet</h3> 
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Ut enim ad minim veniam</p> 
          <img src="images/divider.png" alt="Divider"> 
          <p class="posted">Posted by MrDoom on April 15, 2011</p> 
         </div> 
        </div> 
       </div> 

       <!-- Left and right controls --> 
       <a class="left carousel-control" href="#featured-news" role="button" data-slide="prev"> 
        <img src="images/arrows-left.png" alt="Left arrows"> 
        <span class="sr-only">Previous</span> 
       </a> 
       <a class="right carousel-control" href="#featured-news" role="button" data-slide="next"> 
        <img src="images/arrows-right.png" alt="Right arrows"> 
        <span class="sr-only">Next</span> 
       </a> 
      </div> 

Answer 1

.carousel-caption { 
position: relative; 
left: auto; 
right: auto; 
} 

をちょうどこの問題から克服するためにあなたのコード内でこのCSSを追加します。

これは私が使用している基本的な構造です。