Bootstrap - 如何使文本在小型设备上的图像包裹？ [英] Bootstrap - How to make text wrap around an image on small devices?

问题描述

我刚刚开始使用Bootstrap。以下是我的网页快照。

I'm just getting started with Bootstrap. Below is a snapshot of my page.

我的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>

我想要在大屏幕上挂起图像。然而，在小的设备上，我想得到的文本包裹图像。我怎样才能做到这一点？

I want the image to be hanging like that on big screen. However, on small devices I would like to get the text to wrap around the image. How can I do that?

任何帮助将不胜感激。

推荐答案

这个？它也更聪明）;
http://getbootstrap.com/components/#thumbnails-custom-content

why you dont use this? its also smarter ;) http://getbootstrap.com/components/#thumbnails-custom-content

EDIT

包含来自bootstrap doc的代码

include code from bootstrap doc

<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>

这篇关于Bootstrap - 如何使文本在小型设备上的图像包裹？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！