圖標和文本對齊

如何使用bootstrap 3實現此目的？目前該段落正在包裝圖標下方。這是我到目前爲止：圖標和文本對齊

<div class="what-you-get"> 
    <span class="icon-stack icon-2x left"> 
         <i class="icon-circle icon-stack-base bg-green"></i> 
         <i class="icon-flag icon-light"></i> 
        </span> 
    <h4 class="left">The Problem</h4> 
    <p class="left"> 
     Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy 
    </p> 
</div>

我使用引導2.3.2樣式。 http://jsbin.com/OjoYIMIM/1/edit?html,output

我不能發佈:-(

來源

2013-12-11 Unohoo

您可能需要提供的jsfiddle與您的代碼，以幫助別人看到你在說什麼是什麼您發佈的是一小部分沒有樣式的HTML，我們應該如何提供幫助？ – leigero

您還應該發佈您的CSS，因爲這是此問題的標記的一部分，但您沒有相關代碼 – Cam

Thanks @rafaelcastrocouto for將我的問題發佈到jsbin中。在jsbin文章中，段落的文字包裝在下面圖標。它不符合h4文本。 – Unohoo

解決了圖像：http://jsbin.com/OjoYIMIM/1/edit?html,css,output

[class^="icon-"], [class*=" icon-"] { vertical-align: baseline }

來源

2013-12-11 16:50:51 rafaelcastrocouto

需要將Lorem Ipsum段落與h4文本對齊，並防止p標記纏繞在圖標下方。 – Unohoo

添加'h4 + p {padding-left：20px;}'來影響h4之後的段落;或'p {padding-left：20px;}'如果你想讓它適用於所有段落。 – brouxhaha

22對我來說！好評broux ... http://jsbin.com/OjoYIMIM/2/edit?html,css,output – rafaelcastrocouto

圖標和文本對齊

回答

相關問題