我正在尝试制作一个占据屏幕 100% 宽度的容器。问题是我一直无法使内容适合 Bootstrap 缩略图。当我缩小视口时，这个问题变得更糟。
我将如何更改我的代码以使其更具响应性。
查看 JsFiddle：https ://jsfiddle.net/tvL7bqfz/1/
<div id='thumbnailDiv' class="thumbnail">
<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
<img src='http://placehold.it/350x150' class="thumbnailImg">
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<h4> Awesome Post Title </h4>
<br>
<h4> Awesome Post Description </h4>
<p>
<a class = "btn btn-primary" > More Info </a>
</p>
</div>
</div>
CSS
#thumbnailDiv{
width: 100%;
height: 250px;
}
.thumbnailImg {
float: left;
max-height: 100%;
max-width: 300px;
min-width: 230px;
min-height: 100%;
}
为什么不只col-sm-4用于缩略图容器和col-sm-8额外信息？然后当视口小于 768px 时，它会将它们堆叠在一起。
并将 img 设置为width: 100%;但限制它max-width: 350px（或任何您的实际 img 宽度）。
jsfiddle：https ://jsfiddle.net/2gctwb3r/
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句