Html Bootstrap 3：创建文本和图像左对齐的列表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30169915/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 3: Create list with text and image left aligned
提问by Andy C
I'd like to create a layout like the one in the image
我想创建一个类似于图像中的布局
大版。
What is the best and cleanest way create the layout in HTML and the cleanest way to call it in the CSS? for example, should I create a div for each icon? This what I have tried so far: cssdeck.com/labs/full/vqnsgldc
在 HTML 中创建布局的最佳和最干净的方法是什么，以及在 CSS 中调用它的最干净的方法是什么？例如，我应该为每个图标创建一个 div 吗？这是我到目前为止尝试过的：cssdeck.com/labs/full/vqnsgldc
回答by Anuj
You should look into using bootstrap media componentsthey offer: Abstract object styles for building ... a left- or right-aligned image alongside textual content.
您应该考虑使用他们提供的引导媒体组件：Abstract object styles for building ... a left- or right-aligned image alongside textual content.
Here's an example in JSFiddleto start you off:
这是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>
回答by surfmuggle
As Anuj already answeredthe bootstrap media componentsoffer: Abstract object styles for building ... a left- or right-aligned image alongside textual content
由于Anuj 已经回答了bootstrap 媒体组件提供的问题：Abstract object styles for building ... a left- or right-aligned image alongside textual content
If someone is looking for another option i would try a list and change the list-style-imageto use the image you would like to show
如果有人正在寻找另一个选项，我会尝试一个列表并更改列表样式图像以使用您想要显示的图像
<ul>
<li>one</li>
<li class="star">two</li>
<li class="fo">Three</li>
</ul>
and this css
和这个 css
.foo { vertical-align: top; list-style-image: url(.foo.png...); }
.star { vertical-align: top; list-style-image: url(..star.png..); }
It seems that the image you posted is from 7shifts.com. This is the markup they use and their approach looks similar.
您发布的图片似乎来自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>
And this css
还有这个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;
}
