我正在用 Bootstrap 编写一个网页,在其中一个页面中我有一个两列结构。在右边我有一个或几个图像,在左边有一个文本,它是图像的描述。我想要实现的是,当我向下滚动查看完整图像或所有图像时,文本会伴随我。
我尝试使用 position: fixed in text 或 affix 属性,但它不起作用,因为文本伴随着我,但它没有被完整地看到,因为它位于图像下方。
您可以在此处找到该页面:
http://clients.sabrinacouto.com/kiige/res_publica.html
如有必要,我复制 css 或 html 代码。
知道为什么会发生这种情况,或者是否有任何其他方法可以解决它?
代码:
<section class="row2 text-center col-md-12 center-block text-center">
<div class="col-sm-2 col-md-2">
<div class="projectext">
<p class="">Res Publica valimiskampaania graafilise stiili kujundus välireklaamidele ja trükistele.</p>
</div>
</div>
<div class="col-sm-10 col-md-10">
<div class="image">
<img src="images/Res Publica valimiskampaania kujundus.jpg" class="img-responsive pull-left" alt="web design app image";>
</div>
</div>
</div>
</section>
CSS:
.projectext{
position: fixed;
overflow:hidden;
}
非常感谢!
消灭他
position: fixed;
,他就不会再找你了。当您使用
fixed
它时,它不会考虑任何东西的位置,而是默认为其可用空间的 0.0。如果您想使用
fixed
文本跟随您的页面,请保持这种方式,但margin-left
在所有图像中添加一个(将其添加到图像的 css 类中)。具体来说,您可以:
当您使用 boostrap 时,图像应该是响应式的,以便它们适应设备的分辨率
引导图像
正如您将在文章中看到的
class="img-responsive"
这将使图像适应。
关于文本,评估这里的评论
更多 HTML 和 CSS:带有 Bootstrap 的图像
您将看到您可以应用样式
class="pull-right"
以使其适应图像