Bootstrap - 如何在小型设备上使文本环绕图像？答案

【问题标题】：Bootstrap - How to make text wrap around an image on small devices?Bootstrap - 如何在小型设备上使文本环绕图像？
【发布时间】：2014-01-07 16:48:03
【问题描述】：

我刚刚开始使用 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>

我希望图像像这样挂在大屏幕上。但是，在小型设备上，我想让文本环绕图像。我怎样才能做到这一点？

任何帮助将不胜感激！

【问题讨论】：

标签： css image twitter-bootstrap

【解决方案1】：

添加这行css代码

display:inline;

【讨论】：

试过了......但它不起作用:(.snippet img{ width: 150px; max-width: 100%; height:auto; display:inline; } @media(max-width: 767px) { .snippet img{ width:100px; float: right; max-width: 100px; height: auto; display:inline; } }
您可以将图像包装在一个段落中，它会正常工作。例如。
此处为文字

【解决方案2】：

试试这个

<div style="width: 150px;">
<img src="http://i.stack.imgur.com/Fa34B.png" align="left" width="100" height="100"> This is text  This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text
  </div>

【讨论】：

将标签添加到 HTML 中，但没有任何区别。是因为 CSS 冲突还是其他原因？
是的，尝试删除你的 CSS

【解决方案3】：

你为什么不使用这个？它也更聪明；） http://getbootstrap.com/components/#thumbnails-custom-content

编辑

包含来自引导文档的代码

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

【讨论】：

这很好！但是如果我使用它，图像和文字会变得非常接近。关于如何插入空格的任何想法？
您使用的是哪个版本的引导程序？如果您使用的是 2.3.2，则必须编辑上面的代码。
他的问题是关于将文本换行到一边； Bootstrap 样式将图像置于文本之上。
确实，它把文字放在下面。

【解决方案4】：

你可以试试这个

<style>
    .snippet {width: 250px;}
    .snippet img{ width: 150px; height:auto; float: left; }

  </style>
 </head>
 <body>
<div class="media-body" >
    <div class="snippet">
        <a class="pull-right" href="venue.php"><img  src="http://i.stack.imgur.com/Fa34B.png" alt="illustration"></a>
        <p>this is the paragraph ...  </p>      
    </div>
</div>

【讨论】：

【解决方案5】：

您必须在 html 代码中添加以下类：“img-responsive pull-left”

例如：

<img  src="IMG/img.jpg" alt="about image" class="img-rounded img-responsive pull-left">

【讨论】：

这可行，但它在引导模式上存在行为问题。

【解决方案6】：

我只使用以下内容：只需要浮点数，视觉效果的一些填充：

<div class="float-right pl-3 pb-3">
    <img src="https://i.pinimg.com/474x/4a/c7/3b/4ac73b5c8ef5d397ab535ac1631642a7.jpg" class="shadow img-fluid">
</div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

【讨论】：