使用 Bootstrap 排列图像

Question

是否可以使用 Bootstrap 创建这样的设计：在宽设备上图像位于左上方并被文本包围，而在窄设备上图像位于文本顶部？我不确定如何调用此定位，也找不到类似的示例。

Answer 1

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

您要查找的 CSS 属性和术语是“浮动”，可以在 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;
    }
}

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