使用保证金和响应能力在Bootstrap中浮动图像的最佳方法是什么？

Question

我是Bootstrap的新手，想知道在Twitter Bootstrap 3中浮动图像的最佳方法是什么。我有一个图像，可以在文本内容的左侧或右侧浮动，但在一个非常小的屏幕（即移动）上我希望它占据整个宽度。我还想在图像和内容之间留一些余地，我不得不在线添加。

到目前为止，我的代码是这样的：

<div class="row">
    <a href="#">
        <img alt="sample 1" class="img-thumbnail pull-left" style="margin-right:20px;" src="/resource/image/35392/1.jpg?w=110" />
    </a>
    <p>Test of main image and gallery...</p>
</div>

最终看起来像这样：

这看起来还不错，但不能满足我在非常小的屏幕上拍摄全宽度的需要。

请注意，我希望文本也能在图像周围流动（包括下面），而不仅仅是一个列。希望这是可能的。

Answer 1

有两种方法可以做到这一点：

1. 将文本图像和文本右侧分割为列。

http://jsfiddle.net/Er5gV/

添加此CSS：img {width：100％;}

<div class="row">
    <div class="col-sm-4">
        <img class="img-responsive" src="http://placeimg.com/200/260/tech" alt=""/>
    </div>
    <div class="col-sm-8">
        <p>Lorem ipsum Magna sed cillum occaecat exercitation do ad consectetur ut qui mollit pariatur irure veniam cillum ut reprehenderit consectetur amet reprehenderit elit incididunt enim tempor proident magna dolore amet occaecat enim proident dolor magna eu.</p>
        <p>Lorem ipsum Magna sed cillum occaecat exercitation do ad consectetur ut qui mollit pariatur irure veniam cillum ut reprehenderit consectetur amet reprehenderit elit incididunt enim tempor proident magna dolore amet occaecat enim proident dolor magna eu.</p>
        <p>Lorem ipsum Magna sed cillum occaecat exercitation do ad consectetur ut qui mollit pariatur irure veniam cillum ut reprehenderit consectetur amet reprehenderit elit incididunt enim tempor proident magna dolore amet occaecat enim proident dolor magna eu.</p>
    </div>
</div>

另一种方法是使用浮点数，然后使用媒体查询控制它。

http://jsfiddle.net/2pGew/

img {
    float: left;
    margin-right: 1.5em;
}

@media (max-width: 768px) {
    img {
        display: block;
        float: left;
        margin: 0;
        margin-bottom: 1.5em;
        width: 100%;
    }
}

<div class="row">
    <div class="col-sm-12">
        <img class="img-responsive" src="http://placeimg.com/200/260/tech" alt=""/>
        <p>Lorem ipsum Magna sed cillum occaecat exercitation do ad consectetur ut qui mollit pariatur irure veniam cillum ut reprehenderit consectetur amet reprehenderit elit incididunt enim tempor proident magna dolore amet occaecat enim proident dolor magna eu.</p>
        <p>Lorem ipsum Magna sed cillum occaecat exercitation do ad consectetur ut qui mollit pariatur irure veniam cillum ut reprehenderit consectetur amet reprehenderit elit incididunt enim tempor proident magna dolore amet occaecat enim proident dolor magna eu.</p>
        <p>Lorem ipsum Magna sed cillum occaecat exercitation do ad consectetur ut qui mollit pariatur irure veniam cillum ut reprehenderit consectetur amet reprehenderit elit incididunt enim tempor proident magna dolore amet occaecat enim proident dolor magna eu.</p>
    </div>
</div>