在我的网站文件中,我试图在瞄准镜的左侧显示一系列图像,并使图像上的文字信息粘贴在页面右侧的顶部。我尝试了粘顶,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>

最佳答案

您可以使用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>

关于html - 是否有可能使文本在 bootstrap 中发粘?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/43548859/

10-12 12:36
查看更多