ブートストラップで右/左のアイコン/テキストリストを作成するには？

Question

私は古いサイトをBootstrapを使用してレスポンシブサイトに変換しています。テーブルを使用して左側のアイコンと右側のテキストを表示するすべての古いレイアウトフォーマットを変換する一般的なソリューションを探したいと思います。

は、だから私は関係なく、このようなリストのアイコンの横の長さのテキストを表示するためにそれを必要とする：

しかし、幅が小さすぎるなれば、それは次のように表示される必要があります。

アイコンは、グラフィック、フォントの素晴らしい文字、または単語のいずれでもかまいません。常に同じ幅にする必要があります。

しかし、右のテキストの幅は、長さが変化して折り返すことができますが、アイコンの右に左揃えにしてください。

<div class="row"> 
    <div class="col-xs-1">ICON</div> 
    <div class="col-xs-11">This is the longer text.</div> 
    <div class="clearfix"></div> 
    <div class="col-xs-1">ICON</div> 
    <div class="col-xs-11">This is another the longer text.</div> 
    <div class="clearfix"></div> 
</div> 

しかし、幅の

は "LG" は、それが途切れる：

：

と幅の "XS" に

は、それがもとでラップ

はこれまでのところ、私はこれを持っています

どのようにすることができますか：

• アイコン列が
• テキスト列がアイコン欄の右にとどまるが、そのテキストをラップ幅に応じたが
• テキスト列は常に左揃えたままほかのラインのためにその左マージンを維持し、一定の幅を持っていますアイコン列

Answer 1

Bootstrap Media Objectをお勧めします。

.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="media"> 
 
    <div class="media-left"> 
 
    <a href="#"> 
 
     <img class="media-object" src="https://placehold.it/100x100" alt="..."> 
 
    </a> 
 
    </div> 
 
    <div class="media-body"> 
 
    <h4 class="media-heading">Media heading</h4> 
 
    Here is longer text for the first list item. 
 
    </div> 
 
</div> 
 
<div class="media"> 
 
    <div class="media-left"> 
 
    <a href="#"> 
 
     <img class="media-object" src="https://placehold.it/100x100" alt="..."> 
 
    </a> 
 
    </div> 
 
    <div class="media-body"> 
 
    <h4 class="media-heading">Media heading</h4> 
 
    Here is even longer text for the first list item. Holy moly, this is some long text. It keeps going and going. 
 
    </div> 
 
</div>