Bootstrap 3：创建列表，文本和图像左对齐

Question

我想创建一个类似于图片中的布局

large version。

在HTML中创建布局的最佳和最干净的方法是什么？在CSS中调用它是最干净的方法？例如，我应该为每个图标创建一个div吗？这是我到目前为止所尝试的：cssdeck.com/labs/full/vqnsgldc

Answer 1

Anuj already answered提供bootstrap media components优惠：self.thisis_a_column = newvalue

如果有人正在寻找其他选项，我会try a list and change the list-style-image使用您想要展示的图片

Abstract object styles for building ... a left- or right-aligned image alongside textual content

和这个css

<ul>
  <li>one</li>
  <li class="star">two</li>
  <li class="fo">Three</li>
</ul>

您发布的图片似乎来自7shifts.com。这是他们使用的标记，他们的方法看起来很相似。

.foo { vertical-align: top; list-style-image: url(.foo.png...); }
.star { vertical-align: top; list-style-image: url(..star.png..); }

这个css

<ul class="large-icon-list clearfix">    
     <li class="icon-list-sheets">
         <div class="icon-list-image"></div>
         <div class="icon-list-content">
             <h4>Title on the right from the image</h4>
             <p>Text on the right from the image</p>
         </div>
         <div class="clear"></div>
     </li>

     <li class="icon-list-locations">
          .... same as above
     </li>

     <li class="icon-list-group-connect">
          .... same as above
     </li>
</ul>