對齊圖像留在同一行的文字 - Twitter的引導

目前，我有一個段落標題，並在其右側的圖像，在同一行：對齊圖像留在同一行的文字 - Twitter的引導

<div class="paragraphs"> 
    <div class="row"> 
    <div class="span4"> 
     <div class="content-heading"><h3>Experience &nbsp </h3><img src="../site/img/success32.png"/></div> 
     <p>Donec id elit non mi porta gravida at eget metus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p> 
    </div> 
    </div> 
</div>

這工作得很好 - 內容，標題和圖像在同一行上。但是，當我將圖像放在內容標題div之前時，它們不再位於同一行。這是我想要實現的 - 圖像然後是內容標題 - 在同一行上。

來源

2012-08-10 MattSull

您可以使用浮動：

<div class="paragraphs"> 
    <div class="row"> 
    <div class="span4"> 
     <img style="float:left" src="../site/img/success32.png"/> 
     <div class="content-heading"><h3>Experience &nbsp </h3></div> 
     <p style="clear:both">Donec id elit non mi porta gravida at eget metus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p> 
    </div> 
    </div> 
</div>

如果你想以下<p>留在同一行也刪除其

style="clear:both"

但你應該添加

<div style="clear:both"></div>

它後面有

。

來源

2012-08-10 11:17:18 Oriol

這對我幫助很大。謝謝！！ – Sobiaholic 2014-01-29 17:17:55

任何codepen或小提琴？ – 2017-03-03 03:26:02

使用Twitter的引導類可能是最好的選擇：

pull-left使得浮動左
clearfix一個元件允許所述元件包含浮動元素（如果不是通過另一個類已經被設置）

<div class="paragraphs"> 
    <div class="row"> 
    <div class="span4"> 
     <div class="clearfix content-heading"> 
      <img class="pull-left" src="../site/img/success32.png"/> 
      <h3>Experience &nbsp </h3> 
     </div> 
     <p>Donec id elit non mi porta gravida at eget metus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p> 
    </div> 
    </div> 
</div>

來源

2012-08-10 12:01:54 Sherbrow

實際上，[Bootstrap for media]（http://twitter.github.io/bootstrap/components.html#media）（例如圖片）中的特殊課程需要對齊海報：_media_，_media \ _header_和_media \ _body_ – 2013-07-04 13:11:45

@RaulPinto事實上，它並不是真正寬容的，它與OP的佈局不匹配：http：// jsbin。com/ipuyut/2 /編輯 – Sherbrow 2013-07-04 17:36:48

嗯，我想，OP想要它在「體驗2」http://jsbin.com/utogiz/1/edit – 2013-07-05 13:38:14

自舉3

<div class="paragraphs"> 
    <div class="row"> 
    <div class="col-md-4"> 
     <div class="content-heading clearfix media"> 
      <h3>Experience &nbsp </h3> 
      <img class="pull-left" src="../site/img/success32.png"/> 
     </div> 
     <p>Donec id elit non mi porta gravida at eget metus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p> 
    </div> 
    </div> 
</div>

來源

2013-12-10 10:01:38

span4未在Bootstrap 3中使用 – Acyra 2014-06-28 17:55:57

感謝您指出。答案已更新。 – 2014-08-22 15:55:07

與引導3.3.0開始，你可以使用.media-left和.media-body

<div class="media"> 
    <span class="media-left"> 
     <img src="../site/img/success32.png" alt="..."> 
    </span> 
    <div class="media-body"> 
     <h3 class="media-heading">Experience</h3> 
     ... 
    </div> 
</div>

文檔：https://getbootstrap.com/docs/3.3/components/#media

來源

2014-12-17 12:14:34 maxwilms

這是正確的做法！ – 2017-03-13 02:30:11

我會用引導的網格，以達到預期的效果。 class =「img-responsive」很好地工作。喜歡的東西：

<div class="container-fluid"> 
     <div class="row"> 
      <div class="col-md-3"><img src="./pictures/placeholder.jpg" class="img-responsive" alt="Some picture" width="410" height="307"></div> 
      <div class="col-md-9"><h1>Heading</h1><p>Your Information.</p></div> 
     </div> 
    </div>

來源

2015-01-09 18:49:09 Dave

出於好奇，爲什麼這個答案被低估了？ – Teppic 2015-03-05 06:16:46

我想知道爲什麼。我之前使用過這種方法，它對我有用。根據所提問題，這似乎是一個合適的解決方案。 – Dave 2015-03-27 03:27:42

它爲圖像和文本添加了一堆填充。 – 2015-05-02 23:00:10

使用嵌套列

要嵌套使用默認網格您的內容，添加新.row並設置.COL-SM- *列內的現有.COL-SM-*柱。嵌套行應包含一組最多不超過12個的列（不要求您使用全部12個可用列）。

<div class="row"> 
 
    <div class="col-sm-9"> 
 
    Level 1: .col-sm-9 
 
    <div class="row"> 
 
     <div class="col-xs-8 col-sm-6"> 
 
     Level 2: .col-xs-8 .col-sm-6 
 
     </div> 
 
     <div class="col-xs-4 col-sm-6"> 
 
     Level 2: .col-xs-4 .col-sm-6 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

來源

2016-04-20 11:54:20

對齊圖像留在同一行的文字 - Twitter的引導

回答

相關問題