CSS Bootstrap - 如何在小型设备上使文本环绕图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20676250/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap - How to make text wrap around an image on small devices?
提问by beginning
I'm just getting started with Bootstrap. Below is a snapshot of my page.
我刚刚开始使用 Bootstrap。下面是我的页面的快照。
My CSS is
我的 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;
}
}
And here is my HTML:
这是我的 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>
I want the image to be hanging like that on big screen. However, on small devices I would like to get the text to wrap around the image. How can I do that?
我希望图像像那样挂在大屏幕上。但是，在小型设备上，我想让文本环绕图像。我怎样才能做到这一点？
Any help would be appreciated!
任何帮助，将不胜感激！
回答by MaiKaY
why you dont use this? its also smarter ;) http://getbootstrap.com/components/#thumbnails-custom-content
你为什么不使用这个？它也更聪明；) http://getbootstrap.com/components/#thumbnails-custom-content
EDIT
编辑
include code from bootstrap doc
包含 bootstrap 文档中的代码
<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>
回答by Vikas Sharma
YOu can try this
你可以试试这个
<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>
回答by Vikas Sharma
Try this
尝试这个
<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>
回答by Paul Zahra
I just use the following: float is all that's needed, a bit of padding for visuals:
我只使用以下内容：只需要 float 即可，还有一些视觉效果的填充：
<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>
回答by Miklos Sebestyen
You have to add the following class to your html code: "img-responsive pull-left"
您必须将以下类添加到您的 html 代码中：“img-responsive pull-left”
For example:
例如：
<img src="IMG/img.jpg" alt="about image" class="img-rounded img-responsive pull-left">
回答by sush
Add this line of css code
添加这行css代码
display:inline;
