使用bootstrap使浮动右图像移动响应

Question

我有这个浮动的图像，周围有一些文字：

<img class="img-responsive" style="float:right;" src="https://assets.ifttt.com/images/channels/1352860597/icons/on_color_large.png">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

正如您所看到的，我尝试使用img-responsive类。但尽管如此，在小屏幕上，图像会挤压旁边的文本。这看起来非常混乱，我想知道是否有任何方法可以使图像扩展到占用XS设备的全宽度？

Answer 1

使用网格代替float：right ..

<div class="row">
        <div class="col-sm-3 col-sm-push-9"><img class="img-responsive center-block" src="https://assets.ifttt.com/images/channels/1352860597/icons/on_color_large.png"></div>
        <div class="col-sm-9 col-sm-pull-3">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
                irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
    </div>

http://www.codeply.com/go/BB90AS1Cb3

Answer 2

有很多答案：

使用媒体查询：

Bootply ：http://www.bootply.com/9R942IK2VC

<强> HTML ：

<div class="container">
  <img class="img-responsive mypic" src="https://assets.ifttt.com/images/channels/1352860597/icons/on_color_large.png">

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

<强> CSS ：

@media screen and (min-width:769px) {
  .mypic {float:right; 
}

有重复的图片

Bootply ：http://www.bootply.com/dAWJyzJBeQ#

<强> HTML

<div class="container">
  <img class="img-responsive hidden-xs" style="float:right;" src="https://assets.ifttt.com/images/channels/1352860597/icons/on_color_large.png">
  <img class="img-responsive visible-xs" src="https://assets.ifttt.com/images/channels/1352860597/icons/on_color_large.png">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

使用Bootstrap网格系统请参阅ZimSystem答案