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

Question

我想创建如图所示的布局

large version。

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

Answer 1

您应该考虑使用 bootstrap media components 他们提供的：Abstract object styles for building ... a left- or right-aligned image alongside textual content。

下面是 JSFiddle 中的一个例子，可以让您开始：

<div class="container">
    <div class="row">
        <div class="col-md-6">
            <div class="media">
              <div class="media-left">
                <a href="#">
                  <img class="media-object" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PGRlZnMvPjxyZWN0IHdpZHRoPSI2NCIgaGVpZ2h0PSI2NCIgZmlsbD0iI0VFRUVFRSIvPjxnPjx0ZXh0IHg9IjEzLjQ2MDkzNzUiIHk9IjMyIiBzdHlsZT0iZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQ7ZG9taW5hbnQtYmFzZWxpbmU6Y2VudHJhbCI+NjR4NjQ8L3RleHQ+PC9nPjwvc3ZnPg==" alt="...">
                </a>
              </div>
              <div class="media-body">
                <h4 class="media-heading">Media heading</h4>
                Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
              </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="media">
              <div class="media-left">
                <a href="#">
                  <img class="media-object" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PGRlZnMvPjxyZWN0IHdpZHRoPSI2NCIgaGVpZ2h0PSI2NCIgZmlsbD0iI0VFRUVFRSIvPjxnPjx0ZXh0IHg9IjEzLjQ2MDkzNzUiIHk9IjMyIiBzdHlsZT0iZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQ7ZG9taW5hbnQtYmFzZWxpbmU6Y2VudHJhbCI+NjR4NjQ8L3RleHQ+PC9nPjwvc3ZnPg==" alt="...">
                </a>
              </div>
              <div class="media-body">
                <h4 class="media-heading">Media heading</h4>
                Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
              </div>
            </div>
        </div>
    </div>
</div>

Answer 2

作为 the bootstrap media components 出价：Abstract object styles for building ... a left- or right-aligned image alongside textual content

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

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

和这个css

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

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

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

还有这个css

.clearfix:before, .clearfix:after {content: " "; display: table;}
.clearfix:after {clear: both;}
.clearfix { *zoom: 1;}

.large-icon-list {
    margin-top: 5em; border-bottom: 1px solid #eee;
    margin-left: 8.54701%; margin-right: 8.54701%;
}

.large-icon-list li {
    min-height: 170px; width: 48.71795%;
    float: left; margin-right: 2.5641%;
    display: inline;
}

/* one class-rule for each image - here sheets */
.large-icon-list li.icon-list-sheets .icon-list-image {
  background: url("../icon-sheets.png?14....9") 
  no-repeat top center;
}

.large-icon-list li .icon-list-image {
  height: 100px; width: 23.07692%;
  float: left; margin-right: 2.5641%;
  display: inline;
}

.large-icon-list li .icon-list-content {
  width: 74.35897%; float: right;
  margin-right: 0; *margin-left: -30px;
  display: inline;
}

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

Bootstrap 3: Create list with text and image left aligned

html

css

layout

icons

twitter-bootstrap