Question

我正在尝试显示一个项目网格，图片的高度和宽度都不同，细节可能很长或很短，导致页面上的换行符数量不同。

这就是我想要的样子：

以下是它的实际情况：

以下是我为每个项目构建HTML的方法（注意，整个事情都包含在循环中，因为它标记了网格）：

<div class='col-xs-6 col-sm-3 col-md-3 col-lg-3 text-center item'>
    <div class='item-image'>
        <a href='#' >Delete Item <span class='glyphicon glyphicon-remove-circle' /></a>
        <img class='img-circle img-responsive img-center' src='#' />
    </div>

    <div class='item-details'>
        <h3>Product Name 
            <small>$$price</small>
        </h3>

        <p class='detail'>Date Added</p>
        <p class='detail'><a href='#' target='_blank'>View Item <span class='glyphicon glyphicon-new-window' /></a></p>
    </div>

</div>

正如你所看到的，我并没有真正使用Bootstrap以外的任何东西，细节类只是字体大小。以下是我的问题：

如果图像比其他图像宽，可能会缩短图像（如果宽高比不同），我知道这是由于Bootstrap的img响应，因为宽度是由Bootstrap设置为auto
框下面的文字对整体行高没有任何影响，但我不知道为什么。我想我假设行会根据其中最大的div调整大小？我可以手动设置行，但我试图保持响应，所以一旦你去移动断点，网格是2宽而不是4.

我不确定要搜索什么，我似乎无法就此问题找到任何指导。

Answer 1

看起来你只需要清除在右边断点处应用于项目的浮动，因为你在多个断点处有不同大小的项目。

请参阅MDN Clear，这里是Bootstrap3的内置utilities，但可能在你的循环中没有意义。

请参阅示例代码段。

＆＃13;

@media (min-width: 768px) {
  .item:nth-child(4n+1) {
    clear: left;
  }
}
@media (max-width: 767px) {
  .item:nth-child(2n+1) {
    clear: left;
  }
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">

    <div class='col-xs-6 col-sm-3 text-center item'>
      <div class='item-image'>
        <a href='#'>Delete Item <span class='glyphicon glyphicon-remove-circle' /></a>
        <img class='img-circle img-responsive img-center' src='http://placehold.it/350x150' />
      </div>

      <div class='item-details'>
        <h3>Product Name 
            <small>$$price 1</small>
        </h3>

        <p class='detail'>Date Added</p>
        <p class='detail'><a href='#' target='_blank'>View Item <span class='glyphicon glyphicon-new-window' /></a>
        </p>
      </div>
    </div>

    <div class='col-xs-6 col-sm-3 text-center item'>
      <div class='item-image'>
        <a href='#'>Delete Item <span class='glyphicon glyphicon-remove-circle' /></a>
        <img class='img-circle img-responsive img-center' src='http://placehold.it/350x250' />
      </div>

      <div class='item-details'>
        <h3>Product Name 
            <small>$$price 2</small>
        </h3>

        <p class='detail'>Date Added</p>
        <p class='detail'><a href='#' target='_blank'>View Item <span class='glyphicon glyphicon-new-window' /></a>
        </p>
      </div>
    </div>

    <div class='col-xs-6 col-sm-3 text-center item'>
      <div class='item-image'>
        <a href='#'>Delete Item <span class='glyphicon glyphicon-remove-circle' /></a>
        <img class='img-circle img-responsive img-center' src='http://placehold.it/350x350' />
      </div>

      <div class='item-details'>
        <h3>Product Name 
            <small>$$price 3</small>
        </h3>

        <p class='detail'>Date Added</p>
        <p class='detail'><a href='#' target='_blank'>View Item <span class='glyphicon glyphicon-new-window' /></a>
        </p>
      </div>
    </div>

    <div class='col-xs-6 col-sm-3 text-center item'>
      <div class='item-image'>
        <a href='#'>Delete Item <span class='glyphicon glyphicon-remove-circle' /></a>
        <img class='img-circle img-responsive img-center' src='http://placehold.it/350x250' />
      </div>

      <div class='item-details'>
        <h3>Product Name 
            <small>$$price 4</small>
        </h3>

        <p class='detail'>Date Added</p>
        <p class='detail'><a href='#' target='_blank'>View Item <span class='glyphicon glyphicon-new-window' /></a>
        </p>
      </div>
    </div>

    <div class='col-xs-6 col-sm-3 text-center item'>
      <div class='item-image'>
        <a href='#'>Delete Item <span class='glyphicon glyphicon-remove-circle' /></a>
        <img class='img-circle img-responsive img-center' src='http://placehold.it/350x350' />
      </div>

      <div class='item-details'>
        <h3>Product Name 
            <small>$$price 5</small>
        </h3>

        <p class='detail'>Date Added</p>
        <p class='detail'><a href='#' target='_blank'>View Item <span class='glyphicon glyphicon-new-window' /></a>
        </p>
      </div>
    </div>

    <div class='col-xs-6 col-sm-3 text-center item'>
      <div class='item-image'>
        <a href='#'>Delete Item <span class='glyphicon glyphicon-remove-circle' /></a>
        <img class='img-circle img-responsive img-center' src='http://placehold.it/350x250' />
      </div>

      <div class='item-details'>
        <h3>Product Name 
            <small>$$price 6</small>
        </h3>

        <p class='detail'>Date Added</p>
        <p class='detail'><a href='#' target='_blank'>View Item <span class='glyphicon glyphicon-new-window' /></a>
        </p>
      </div>
    </div>


    <div class='col-xs-6 col-sm-3 text-center item'>
      <div class='item-image'>
        <a href='#'>Delete Item <span class='glyphicon glyphicon-remove-circle' /></a>
        <img class='img-circle img-responsive img-center' src='http://placehold.it/350x450' />
      </div>

      <div class='item-details'>
        <h3>Product Name 
            <small>$$price 7</small>
        </h3>

        <p class='detail'>Date Added</p>
        <p class='detail'><a href='#' target='_blank'>View Item <span class='glyphicon glyphicon-new-window' /></a>
        </p>
      </div>
    </div>

    <div class='col-xs-6 col-sm-3 text-center item'>
      <div class='item-image'>
        <a href='#'>Delete Item <span class='glyphicon glyphicon-remove-circle' /></a>
        <img class='img-circle img-responsive img-center' src='http://placehold.it/450x250' />
      </div>

      <div class='item-details'>
        <h3>Product Name 
            <small>$$price 8</small>
        </h3>

        <p class='detail'>Date Added</p>
        <p class='detail'><a href='#' target='_blank'>View Item <span class='glyphicon glyphicon-new-window' /></a>
        </p>
      </div>
    </div>

    <div class='col-xs-6 col-sm-3 text-center item'>
      <div class='item-image'>
        <a href='#'>Delete Item <span class='glyphicon glyphicon-remove-circle' /></a>
        <img class='img-circle img-responsive img-center' src='http://placehold.it/250x450' />
      </div>

      <div class='item-details'>
        <h3>Product Name 
            <small>$$price 9</small>
        </h3>

        <p class='detail'>Date Added</p>
        <p class='detail'><a href='#' target='_blank'>View Item <span class='glyphicon glyphicon-new-window' /></a>
        </p>
      </div>
    </div>

  </div>
</div>

＆＃13;

Answer 2

使用class =“row”

添加包裹四个元素的div

<div class="row">
    <div class='col-xs-6 col-sm-3 col-md-3 col-lg-3 text-center item'>
        <div class='item-image'>
            <a href='#' >Delete Item <span class='glyphicon glyphicon-remove-circle' /></a>
            <img class='img-circle img-responsive img-center' src='#' />
        </div>

        <div class='item-details'>
            <h3>Product Name 
                <small>$$price</small>
            </h3>

            <p class='detail'>Date Added</p>
            <p class='detail'><a href='#' target='_blank'>View Item <span class='glyphicon glyphicon-new-window' /></a></p>
        </div>

    </div
    <div class='col-xs-6 col-sm-3 col-md-3 col-lg-3 text-center item'>
          .... second

    </div
    <div class='col-xs-6 col-sm-3 col-md-3 col-lg-3 text-center item'>
          .... third

    </div>
      <div class='col-xs-6 col-sm-3 col-md-3 col-lg-3 text-center item'>
          .... fourth

    </div>
</div>

以防

尝试在itemn-details类中添加适当的最小高度（最大img高度）..

Boostrap中对齐网格项的CSS指南

2 个答案: