如何对齐Bootstrap缩略图中的按钮？

Question

我正在使用此jQuery代码来对齐一行Bootstrap缩略图：

Name = table_ha
+----------+------------------+
| hash_loc |     hash_val     |
+----------+------------------+
|  242342  | 9606075000001005 |
+----------+------------------+
|  431231  | 9606075000005208 |
+----------+------------------+
|  342344  | 7645345456745536 |
+----------+------------------+
|  324254  | 7656453453465788 |
+----------+------------------+
|  656456  | 9788674534546766 |
+----------+------------------+
|  674453  | 3458752778456834 |
+----------+------------------+
|   ...    |       ...        |
+----------+------------------+
|  765874  | 8796634586346785 |
+----------+------------------+
|  864534  | 9834667054534588 |
+----------+------------------+

截图：

问题：

如何对齐4个按钮？

Answer 1

你可以使用flex来做到这一点。包裹所有内容，但div中的按钮除外。然后在父div上应用<Code>021-05402</Code> <Code>022-05402</Code> 。

这是一个例子。我将flex-direction:column;justify-content:space-between;设置为固定宽度，因为你使用jquery做了相同的事情。

.col

.col{
  width:150px;
  padding:0 10px;
  margin:5px;
  border:1px solid black;
  float:left;
  display:flex;
  flex-direction:column;
  height:230px;
  justify-content:space-between;
}