對齊的多個圖像/上同一行標題 - 自舉3

我試圖對齊在同一行3個標題和2倍的圖像，像這樣：對齊的多個圖像/上同一行標題 - 自舉3

標題圖片標題圖片標題

我

<div class="media"> 

    <h5 class="media-heading">Media heading</h5> 
    <img class="media-object pull-left" src="img/img.png" alt="..." /> 
    <h5 class="media-heading">Media heading</h5> 
    <img class="media-object pull-left" src="img/img.png" alt="..." /> 
    <h5 class="media-heading">Media heading</h5> 

</div>

，但我有一個很難得到的一切是在同一行：採用引導的媒體組件，像這樣試過。有任何想法嗎？謝謝。

來源

2014-03-13 user3403328

你可能想選擇一個最好的答案......？ – webeno

請嘗試這種方式

<div class="media"> 

    <h5 class="media-heading pull-left">Media heading</h5> 
    <img class="media-object pull-left" src="img/img.png" alt="..." /> 
    <h5 class="media-heading pull-left">Media heading</h5> 
    <img class="media-object pull-left" src="img/img.png" alt="..." /> 
    <h5 class="media-heading pull-left">Media heading</h5> 

</div

來源

2014-03-13 06:24:07 Shaheer

非常感謝大家！我用這種方式。 – user3403328

不錯的答案......... !! – Jamsheer

添加.media h5 { display:inline }你的CSS，你就大功告成了;）

小提琴：http://jsfiddle.net/mC82w/

編輯對不起忘了這裏面裝的引導，所以我測試了那裏，發現你也必須這樣做除了是添加.media img { display:inline; }加擺脫pull left類的圖像標籤內

來源

2014-03-13 06:14:41 webeno

我剛剛嘗試過這種語言環境行，我在一行使用class list-inline標記圖像鏈接和文本鏈接。我用img {display：inline; }圍繞列表內聯。它很棒！ –

高興我可以幫助...嘿，爲什麼不給我的答案豎起大拇指（旁邊的答案大數字以上的大三角）...？ ;） – webeno

只要使用類=「媒體標題拉左」三個標題

<div class="media"> 

     <h5 class="media-heading pull-left">Media heading</h5> 
     <img class="media-object pull-left" src="img/img.png" alt="..." /> 
     <h5 class="media-heading pull-left">Media heading</h5> 
     <img class="media-object pull-left" src="img/img.png" alt="..." /> 
     <h5 class="media-heading pull-left">Media heading</h5> 

</div>

來源

2014-03-13 06:33:11 ecoli

對於這些類型的使用情況，我瞭解到，自舉的thumbnails相當方便我們可以快速顯示圖像，視頻，文字等的水平列表。

基本示例：

<div class="row"> 
    <div class="col-xs-6 col-md-3"> 
    <a href="#" class="thumbnail"> 
     <img src="..." alt="..."> 
    </a> 
    </div> 
    ... 
</div>

來源

2017-08-17 05:59:47 Anupam

對齊的多個圖像/上同一行標題 - 自舉3

回答

相關問題