ブートストラップにテキストを貼り付けることはできますか？

Question

私のウェブサイトのファイルでは、視界の左側に一連の画像を表示しようとしていて、画像のテキスト情報を右側のページの上部に貼り付けるようにしています。私はsticky-top、dataspy = "affix"、および他の複数のものを試しましたが、サイコロはありませんでした。ここで

私が何を意味するかの例です： http://imgur.com/T8Vo0JC

<div class="container"> 
    <!-- Example row of columns --> 
    <div class="row"> 
    <div class="col-md-6 col-sm-9"> 
     <img id="constructedimage" src="images/small1.jpg"> 
    </div> 

    <div class="col-md-6 col-sm-9"> 
     <p class="pstylefooter">Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac </p> 
    </div> 

</div> 

    </div>  

    <div class="container"> 
    <!-- Example row of columns --> 
    <div class="row"> 
    <div class="col-md-6 col-sm-9"> 
     <p class="pstyle">PROCESS WORK</p> 
     <img id="constructedimage" src="images/small1.jpg"> 
    </div> 
</div> 
    </div>  

Answer 1

私は正しいことを理解し、あなたは画像をスクロールダウンDIVたい場合は、position: sticky

* {margin:0;padding:0;} 
 

 
body { 
 
    line-height: 1; 
 
} 
 

 
.sticky { 
 
    position: sticky; 
 
    top: 0; 
 
    background: rgba(255,255,255,0.5); 
 
    margin-left: 50%; 
 
    padding-left: 1em; 
 
} 
 

 
div { 
 
    margin: 0 0 2em; 
 
} 
 

 
img { 
 
    max-width: 50%; 
 
}

<div> 
 
    <p class="sticky">text</p> 
 
    <img id="constructedimage" src="https://previews.123rf.com/images/farang/farang1201/farang120100040/11875191-Amazing-sunset-scene-Long-exposure-shot-vertical-panoramic-composition-Stock-Photo.jpg"> 
 
</div> 
 

 
<div> 
 
    <p class="sticky">more text</p> 
 
    <img id="constructedimage" src="https://previews.123rf.com/images/farang/farang1201/farang120100040/11875191-Amazing-sunset-scene-Long-exposure-shot-vertical-panoramic-composition-Stock-Photo.jpg"> 
 
</div>