ブートストラップ3.xはインラインでh4とアイコンを表示しません

Question

bootstrap 3.Xを使用してアイコンと説明でタイトルをリストする必要があります。しかし、アクション<h4>と<i>はinlineに表示されません。

HTML：

<div class="mil-product"> 
    <ul> 
    <li> 
     <div class="title"><span class="so"><i class="fa fa-gift fa-2x"></i> <h4> Title of</h4></span></div> 
     <span class="desc"><i class="fa fa-check-square-o fa-lg"></i>Description Description Description Description </span> 
    </li> 
    <li> 
     <div class="title"><span class="so"><i class="fa fa-truck fa-2x"></i><h4> Title Of 2</h4></span></div> 
     <span class="desc"><i class="fa fa-check-square-o fa-lg"></i>Description Description Description Description</span> 
    </li> 
    <li> 
     <div class="title"><span class="so"><i class="fa fa-truck fa-2x"></i><h4> Title Of 3</h4></span></div> 
     <span class="desc"><i class="fa fa-check-square-o fa-lg"></i>Description Description Description Description</span> 
    </li> 
    </ul> 
</div> 

CSS：

.mil-product > ul > li > div.title { 
    display: inline-block; 
    border-bottom: 3px solid #e1e1e1; 
    width: 100%; 
    position: relative; 
    top: 12px; 
    } 

    .mil-product > ul > li > div.title > .so { 
    color: #a0a0a0; 
    position: absolute; 
    top: -5px; 
    left: 10px; 
    background-color: #fff; 
    font-size: 12px; 
    padding: 0 5px; 
    width: auto; 
    } 

    .mil-product > ul > li > span.desc { 
    display: inline-block; 
    padding: 10px 0 0; 
    margin-top: 10px; 
    } 

    ul { 
    list-style-type: none; 
    } 

DEMO Here

Answer 1

h4はデフォルトブロック要素である、あなたのCSSでこれを入れてそれは新しい行に下がる傾向があります。それをインラインにする必要があります。

h4 { 
    display: inline-block; /* to make it inline */ 
    vertical-align: middle /* to align it vertically other values are top | bottom | baseline */ 
} 

Answer 2

h4 { 
    display: inline-block; 
} 

Answer 3

h4にはデフォルトの「display：block」プロパティがあります。 他のコンテンツを相対的な位置に配置する必要がある場合は、それを変更する必要があります。

だから、解決策は、あなたのCSSにこれらの行を追加することです：

h4 { 
    display: inline-block; 
    } 

ケア、いつかあなたが追加する必要があります。それらは、垂直配向性を持つために「垂直整列をトップ/ミドル/何でも...」 。 シンプル:)