如何将包含3个图像的引导行居中？

时间：2016-11-03 14:26:03

标签： html css twitter-bootstrap-3

我有一个容器流体包含3行

第1行：4张图片 第2行：4张图像 第3行：3张图片

我试图将第3行放在中心，我尝试在另一个名为＆＃34的容器中添加第3行;容器＆＃34;并尝试了'左，右＆＃34;在css但没有工作，请你帮忙吗？

＆＃13;
＆＃13; 
.b3 {
	padding-bottom: 20px;
}

.client-section {
	 -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

.img-responsive {
	padding-bottom: 10px;
}

#clients  {padding-top:10px;padding-bottom:50px;color: #7e7e7e; background-color:#151515;}
＆＃13; 
<section class="container-fluid client-section" id="clients">
    <div class="row">
        <div>
          <b class="col-lg-10
            col-md-10
            col-sm-10
            col-xs-10
            col-lg-push-1
            col-md-push-1
            col-sm-push-1
            col-xs-push-1 b2 b3">Clients</b>
        </div>
      </div>
      <div class="col-lg-10
            col-md-10
            col-sm-10
            col-xs-10
            col-lg-push-1
            col-md-push-1
            col-sm-push-1
            col-xs-push-1">
	<div class="row">
		<div class="col-lg-3">
			<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
		</div>
		<div class="col-lg-4">
			<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
		</div>
		<div class="col-lg-3">
			<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
		</div>
		<div class="col-lg-2">
			<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
		</div>
	</div>
	
	
	<div class="row">
		<div class="col-lg-3">
			<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
		</div>
		<div class="col-lg-4">
			<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
		</div>
		<div class="col-lg-3">
			<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
		</div>
		<div class="col-lg-2">
			<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
		</div>
	</div>
	
	<div class="row center">
		<div class="col-lg-3">
			<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
		</div>
		<div class="col-lg-3">
			<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
		</div>
		<div class="col-lg-3">
			<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
		</div>
	</div>
	</div>
</section>
＆＃13;
＆＃13;
＆＃13;

3 个答案:

答案 0 :(得分：2)

这是你的解决方案

.b3 {
	padding-bottom: 20px;
}

.client-section {
	 -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

.img-responsive {
	padding-bottom: 10px;
}
.center .img-responsive{
  margin:0 auto;
  display:block;
  }

#clients  {padding-top:10px;padding-bottom:50px;color: #7e7e7e; background-color:#151515;}
<div class="row">
		<div class="col-lg-3">
			<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
		</div>
		<div class="col-lg-4">
			<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
		</div>
		<div class="col-lg-3">
			<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
		</div>
		<div class="col-lg-2">
			<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
		</div>
	</div>
	
	
	<div class="row">
		<div class="col-lg-3">
			<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
		</div>
		<div class="col-lg-4">
			<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
		</div>
		<div class="col-lg-3">
			<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
		</div>
		<div class="col-lg-2">
			<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
		</div>
	</div>
	
	<div class="row center">
		<div class="col-lg-3">
			<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
		</div>
		<div class="col-lg-3">
			<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
		</div>
		<div class="col-lg-3">
			<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
		</div>
	</div>

答案 1 :(得分：0)

最后一行有9个，需要12个，用4个替换3个。

    public class ViewModelBase : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;

    protected virtual void OnPropertyChanged([CallerMemberName]string name = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
    }
}

通过这个改变css：

<div class="row">
    <div class="col-lg-4">
        <img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
    </div>
    <div class="col-lg-4">
        <img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
    </div>
    <div class="col-lg-4">
        <img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
    </div>
</div>

答案 2 :(得分：0)

你可以使用bootstrap class text-center

或者你可以添加这个css 

.center{
   text-align: center;
}

＆＃13;
＆＃13; 
.b3 {
	padding-bottom: 20px;
}

.client-section {
	 -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

.img-responsive {
	padding-bottom: 10px;
}

#clients  {padding-top:10px;padding-bottom:50px;color: #7e7e7e; background-color:#151515;}

.center{
   text-align: center;
}
＆＃13; 
<section class="container-fluid client-section" id="clients">
    <div class="row">
        <div>
          <b class="col-lg-10
            col-md-10
            col-sm-10
            col-xs-10
            col-lg-push-1
            col-md-push-1
            col-sm-push-1
            col-xs-push-1 b2 b3">Clients</b>
        </div>
      </div>
      <div class="col-lg-10
            col-md-10
            col-sm-10
            col-xs-10
            col-lg-push-1
            col-md-push-1
            col-sm-push-1
            col-xs-push-1">
	<div class="row">
		<div class="col-lg-3">
			<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
		</div>
		<div class="col-lg-4">
			<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
		</div>
		<div class="col-lg-3">
			<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
		</div>
		<div class="col-lg-2">
			<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
		</div>
	</div>
	
	
	<div class="row">
		<div class="col-lg-3">
			<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
		</div>
		<div class="col-lg-4">
			<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
		</div>
		<div class="col-lg-3">
			<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
		</div>
		<div class="col-lg-2">
			<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
		</div>
	</div>
	
	<div class="row center">
		<div class="col-lg-3">
			<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
		</div>
		<div class="col-lg-3">
			<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
		</div>
		<div class="col-lg-3">
			<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
		</div>
	</div>
	</div>
</section>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题