[英]HTML tags getting overlapped in a bootstrap 3 Thumbnail class
我创建了Bootstrap缩略图作为链接图像到Web应用程序的其他部分。 使用Bootstrap 3方形图块显示来创建我的缩略图,并在缩略图内包含<a>
标签。 尝试使用缩略图<div>
内的<p>
添加其他信息。 <p>
标签与每个元素重叠。 例如,最后一个<p>
标签与它之前的任何标签重叠。 (只有当我将类“缩略图”添加到<p>
标记时,这才是正确的。尝试了各种方法来解决此问题,但仍无法提出解决方案。请参见下面的代码或访问http:// www .bootply.com / boXJrupqT0 (您将在缩略图的最底部看到重叠的文本)
我的目标:在文本换行时(如果需要)在同一个<div>
上显示<a>
和两个<p>
标签。 任何帮助,将不胜感激。
谢谢。
HTML:
<div class="row">
<div class="col-md-3 col-sm-4 col-xs-6 capabilitiesTiles">
<div class="squareThumbnails"></div>
<a href="#x" class="thumbnail purple">Test A</a>
<p>Dkadlgjaklsgjasdglajdslkgjaklsjg</p>
<p>agdagsdvasbaerasdhadgasdgasdhasdhadhasdhahasha</p>
</div>
<div class="col-md-3 col-sm-4 col-xs-6 capabilitiesTiles">
<div class="squareThumbnails"></div>
<a href="#x" class="thumbnail purple">Test B</a>
<p>Dkadlgjaklsgjasdglajdslkgjaklsjg</p>
<p>agdagsdvasbaerasdhadgasdgasdhasdhadhasdhahasha</p>
</div>
<div class="col-md-3 col-sm-4 col-xs-6 capabilitiesTiles">
<div class="squareThumbnails"></div>
<a href="#x" class="thumbnail purple">Test C</a>
<p>Dkadlgjaklsgjasdglajdslkgjaklsjg</p>
<p>agdagsdvasbaerasdhadgasdgasdhasdhadhasdhahasha</p>
</div>
</div>
CSS:
/* CSS used here will be applied after bootstrap.css */
.squareThumbnails {
margin-top: 100%;
}
.thumbnail {
position: absolute;
top: 15px;
bottom: 0;
left: 15px;
right: 0;
text-align:center;
padding-top:calc(50% - 110px);
}
.capabilitiesTiles {
margin: 0px 10px -15px 65px;
}
.row .thumbnail {
border-width: 3px;
border-style: solid;
}
这是因为您的缩略图的position:absolute
只需将height
属性添加到缩略图类小提琴即可
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.