使用 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 class。但尽管如此，在小屏幕上，图像会挤压旁边的文本。这看起来很乱，我想知道是否有任何方法可以使图像在 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 使右浮动图像移动响应

Making float-right image mobile responsive with bootstrap

css

grid-layout

css-float

twitter-bootstrap

有媒体查询 :

图片重复:

使用 Bootstrap 网格系统参见 ZimSystem 答案