问

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

hwongth 发布于 2023-02-09 12:07

bootstrap

css

html

php

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

About the venue

    
            
    this is the paragraph ...

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

任何帮助,将不胜感激!

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>

2023-02-09 12:12 回答

大大醯_804_224

撰写答案

今天，你开发时遇到什么问题呢？

立即提问

热门标签