ブートストラップを使ってアイコン（グリフ/フォント - awesome）の隣に複数の行を配置する

Question

フォントの素晴らしいアイコンの隣にテキストを配置したいと思っています。テキストが1行しか取らない場合、これはうまく動作します。しかし、それは複数の行を取るとすぐに、それは正常に動作を停止します。

これは私が欲しいものです：

|----| 
| | Very short text. 
|----| 

|----| Long long long long long long long long 
| | long long long long long long long long 
|----| long long long long long long long text. 

これは、それが今のようになります。ここでは

は私のコードです：http://www.bootply.com/EVPYyfpcxw

HTML

<div> 
    <span class="myIcon fa fa-gear"></span> 
    <span class="myText">Very short text.</span> 
</div> 
<br> 
<div> 
    <span class="myIcon fa fa-gear"></span> 
    <span class="myText">Long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long text.</span> 
</div> 

CSS

.myIcon { 
    vertical-align:middle; 
    text-align: center; 
    font-size:50px; 
    line-height:75px; 
    width: 75px; 
} 

.myText { 
    font-weight: 700; 
    font-size: 22px; 
} 

2行はおそらく十分だろうが、3人はいいだろう。このについての詳細は

Answer 1

<div class="row"> 
    <div class="col-md-3"> 
    <span class="myIcon fa fa-gear"></span> 
    </div> 
    <div class="col-md-9"> 
    <span class="myText">Very short text.</span> 
    </div> 
</div> 

参照してください。 http://getbootstrap.com/css/#grid

を全体的にこの2つのカラムを持つ行にあなたのアイコンとテキストの両方を設定することによって動作しますけれども。各列が他と分離していることと、長いテキストが左の列に染み込まないようにする。