bootstrap作业4.17图片位置设置

html 中container模型

		<div class="container-fluid bg-primary common">
			<div class="container">
				<h2 class="common-title text-center">合作伙伴</h2>
				<div class="row">
				  <div class="col-lg-8 col-lg-offset-2 common-detail text-center">我们有众多的合作伙伴。</div>
				</div>
				<div class="row">
					<div class="col-lg-2 common-item logo1"><a href=""></a></div>
					<div class="col-lg-2 common-item logo2"><a href=""></a></div>
					<div class="col-lg-2 common-item logo3"><a href=""></a></div>
					<div class="col-lg-2 common-item logo4"><a href=""></a></div>
					<div class="col-lg-2 common-item logo5"><a href=""></a></div>
				</div>
			</div>
		</div>

css样式定义

.common .common-title{
	color:#b8ff9e;
}
.common .common-detail{
	color:#ffffd3;
}
.common .common-item {
	display: block;
	width:200px;
	height:180px;
	background: url(../img/logos.png) left top no-repeat;
	margin: 0 auto;
}
.common .common-item{
	width: 20%;
	margin:0 auto;
}
.common .logo2{
	background-position: left -180px;
}
.common .common-item:nth-of-type(3){
	background-position: left -360px ;
}
.common .common-item:nth-of-type(4){
	background-position: left -540px ;
}
.common .common-item:nth-of-type(5){
	background-position: left -720px ;
}

运行图片