用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; 
    } 
} 

我用一個例子here做了一個快速JSfiddle。希望我已經爲您提供了足夠的幫助來解決您的問題。