使用Bootstrap安排图像

Question

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

Answer 1

如果没有看到您的HTML或CSS，我就无法说太多话。但我可以提供一个如何运作的例子。我会假设你的图像足够大以填充一个狭窄的设备。

您要查找的CSS属性和术语是＆＃34; float＆＃34;可以找到一些文档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。希望我已经为您提供了足够的帮助以解决您的问题。