如何在Bootstrap中制作右/左图标/文本列表？

Question

我正在使用Bootstrap将旧网站转换为响应式网站，我想找到一个通用解决方案，它可以转换所有旧的布局格式，使用表格在左侧显示图标，在右侧显示文本。

所以我需要它来显示文本而不管列表中图标旁边的长度如下：

但是如果宽度太小，那么它应该显示如下：

图标可以是图形，Font Awesome字符或单词，并且应始终保持相同的宽度。

但是正确的文字宽度应该能够在长度和包裹方面变化，但保持左对齐到图标的右侧。

到目前为止，我有这个：

<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。

＆＃13;

＆＃13;

.

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;