在 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 响应，因为宽度由 Bootstrap 设置为自动.

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

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

Answer 1

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

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

参见示例代码段。

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

Answer 2

添加一个 div 用 class="row" 包裹四个元素

<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 高度）..