Question

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

enter image description here

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

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

任何帮助将不胜感激！

Answer 1

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

修改

包含来自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>

Answer 2

你可以试试这个

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

Answer 3

试试这个

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

Answer 4

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

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

Answer 5

添加此行的css代码

display:inline;

Answer 6

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

例如：

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

Bootstrap - 如何在小型设备上围绕图像进行文本环绕？

6 个答案: