我刚刚开始使用 Bootstrap。下面是我的页面的快照。
我的 CSS 是
.snippet img{
width: 150px;
max-width: 100%;
height:auto;
}
@media(max-width: 767px) {
.snippet img{
width:100px;
float: right;
max-width: 100px;
height: auto;
margin-left: 10px;
margin-right: 10px;
}
}
这是我的 HTML:
<h2>About the venue</h2>
<div class="media-body snippet" >
<a class="pull-right" href="venue.php">
<img src="images/venue.jpg" alt="illustration"></a>
<p>this is the paragraph ... </p>
</div>
我希望图像像那样悬卡在大屏幕上。但是,在小型设备上,我想让文本环绕图像。我怎样才能做到这一点?
如有任何帮助,我们将不胜感激!
最佳答案
你为什么不用这个?它也更聪明;) http://getbootstrap.com/components/#thumbnails-custom-content
编辑
包含 Bootstrap 文档中的代码
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img data-src="holder.js/300x200" alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
</div>
</div>
</div>
关于css - Bootstrap - 如何在小型设备上使文本环绕图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20676250/