html - 列的垂直中间对齐( Bootstrap )

Question

我正在尝试对行内的列进行中间对齐/垂直对齐。所以这是我的代码:)

Bootstrap 使用。

FIDDLE

我想用这样的东西

#row-contact {
display: flex;
align-items: center; }

但它在移动设备上似乎无法正常工作 - 列未堆叠。

所以也许有人可以帮助我并知道我应该对我的代码进行哪些更改。

它应该也适用于移动设备。

Answer 1

除了您尝试的代码:

#row-contact {
  display: flex;
  align-items: center;
}

您需要做的是为小型设备添加媒体查询，将行转换为 block 元素(默认情况下占据 100% 的宽度)。我在这里设置了 600 像素的宽度，但您可以随意调整到您希望各行堆叠在一起的宽度:

@media screen and (max-width: 600px) {
  #row-contact {
    display: block;
  }
}

我创建了一个 fiddle 来展示这个 here .

希望对您有所帮助! :)