Question

如何使一列具有不均匀列数的图像居中，例如当我使用以下代码时（我需要让图像彼此相邻，这就是为什么我有.no-padding类）：

<div class="container">
    <div class="row">
        <div class="col-md-3 no-padding">
            <img class="img-responsive" src="http://lorempixel.com/400/200/" alt="" />    
        </div>
        <div class="col-md-3 no-padding">
            <img class="img-responsive" src="http://lorempixel.com/400/200/" alt="" />    
        </div>
        <div class="col-md-3 no-padding">
            <img class="img-responsive" src="http://lorempixel.com/400/200/" alt="" />    
        </div>
    </div>
</div>

CODEPEN DEMO

Answer 1

试试这个：http://www.minimit.com/demos/bootstrap-3-responsive-centered-columns

.row-centered {
    text-align:center;
}
.col-centered {
    display:inline-block;
    float:none;
    /* reset the text-align */
    text-align:left;
    /* inline-block space fix */
    margin-right:-4px;
}

Answer 2

为每个display: inline-block; float: none;添加.row > div，为text-align: center;添加.container > .row

.row {
  float: none;
  text-align: center;
  width: 400px;
  border: 1px solid red;
}
.col-md-3 {
  width: 30%;
}
.row .no-padding {
  display: inline-block;
}
.no-padding {
  border: 1px solid green;
  background-color: #ddd;
  height: 50px;
}

<div class="container">
  <div class="row">
    <div class="col-md-3 no-padding">
      <!-- <img class="img-responsive" src="http://lorempixel.com/400/200/" alt="" /> -->
    </div>
    <div class="col-md-3 no-padding">
      <!-- <img class="img-responsive" src="http://lorempixel.com/400/200/" alt="" /> -->
    </div>
    <div class="col-md-3 no-padding">
      <!-- <img class="img-responsive" src="http://lorempixel.com/400/200/" alt="" /> -->
    </div>
  </div>

  <div class="row">
    <div class="col-md-3 no-padding">
      <!-- <img class="img-responsive" src="http://lorempixel.com/400/200/" alt="" /> -->
    </div>
    <div class="col-md-3 no-padding">
      <!-- <img class="img-responsive" src="http://lorempixel.com/400/200/" alt="" /> -->
    </div>
  </div>
</div>

Answer 3

找到 codepen Demo

.no-padding {
    padding: 0;
}
.col-md-3{
    float:none;
    display:inline-block;
    margin:0 -2px;
    padding:0;
}
.tac{
    text-align:center;
}

HTML：

<div class="container">
    <div class="row tac">
        <div class="col-md-3 no-padding">
            <img class="img-responsive" src="http://lorempixel.com/400/200/" alt="" />    
        </div>
        <div class="col-md-3 no-padding">
            <img class="img-responsive" src="http://lorempixel.com/400/200/" alt="" />    
        </div>
        <div class="col-md-3 no-padding">
            <img class="img-responsive" src="http://lorempixel.com/400/200/" alt="" />    
        </div>
    </div>
</div>

如何使用引导程序将不均匀列的行与图像对齐？

3 个答案: