用 Bootstrap 排列图像

Question

是否可以使用 Bootstrap 创建这样的设计：在宽屏设备上图像位于左上角并被文本包围，而在窄屏设备上图像位于文本之上？不知道这个定位怎么叫，找不到类似的例子

Answer 1

没有看到你的 HTML 或 CSS，我不能说太多。但我可以提供一个例子来说明这是如何工作的。我假设您的图像足够大以填充狭窄的设备。

您要查找的 CSS 属性和术语是 "float" 可以找到一些文档 here.

下面的 HTML 是一个包含一些文本的图像示例。

<p>
    <img src="example.png" />
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id pulvinar urna. Cras scelerisque finibus aliquam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut nec interdum metus. Donec iaculis, nisl quis dignissim tincidunt, lorem nulla rhoncus turpis, eu fermentum ante orci a libero. Suspendisse varius nisl ut dui tincidunt, et feugiat eros egestas. Sed rhoncus viverra tellus ut pulvinar. Morbi id enim eget mauris bibendum tristique. Duis gravida ligula metus, quis porta massa mattis facilisis.       
<p>

现在 CSS.

/* This will align your image to the left within a p tag */
.image {
    float: left;
    margin: 10px;
}

/* To accommodate a smaller screen you will need a media query */
@media screen and (max-width: 640px) {
    .image {
        width: 100%;
        margin: 10px auto;
    }
}

我用一个例子做了一个快速的 JSfiddle here。希望我已经为您提供了足够的帮助来解决您的问题。

用 Bootstrap 排列图像

Arrange an Image with Bootstrap

image

twitter-bootstrap

positioning