html - 关于在 Bootstrap 中对齐网格项的 CSS 指南

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，我实际上并没有使用任何其他东西，详细信息类只是字体大小。这是我的问题:

1. 如果图像比其他图像宽，它可能会使图像变短(如果纵横比不同)，我知道这是由于 Bootstrap 的 img-responsive，因为 Bootstrap 将宽度设置为自动.

2. 框下方的Text对整体行高没有任何影响，但我不知道为什么。我想我假设该行会根据其中最大的 div 调整大小？我可以手动设置行，但我试图让它保持响应，所以一旦你转到移动断点，网格是 2 宽而不是 4 宽。

我不确定要搜索什么，我似乎找不到关于此问题的任何指导。

Answer 1

看起来您只需要在正确的断点处清除应用于元素的 float ，因为您在多个断点处有不同大小的元素。

参见 MDN Clear这是内置的 utilities对于 Bootstrap3，但在循环内部可能没有意义。

参见示例代码段。

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

<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>