我看到 bootstrap 无法固定行中列的高度。例如:图像1:1,它将在列中响应,但是图像的位置在行的顶部。

如果我在heading标记中包含文本,则该文本具有默认的边距,可将下面的文本压入。因此,图像将被绑定(bind)到顶部,而文本将在顶部下方。

如果我需要规范化列并使其居中对齐怎么办?

我的问题是:

  • 是否有 native bootstrap 来对齐列?
  • 如果不支持这种对齐方式,我可以使用哪些“hack”?我尝试了一些“技巧”,但它们会影响基本的 bootstrap 功能。

  • 我到底需要做什么:

    抱歉,但是很难在jsfiddle中实现,它包括Angular指令和模板。仅举例来说:

    我有一个生成此指令:

    我需要将图像居中对齐,或者至少要在heading垂直开始处对齐。例如:

    如果您想尝试,我会制作此jsfiddle。我只接受没有任何代码的解释。

    我可以用一些“被黑”的CSS来修复它,但是我想知道如何才能正确地做到这一点。

    最佳答案

    一种方法是像这样在img元素上使用translateY:

    .v-center {
      position: relative;
      transform: translateY(50%);
    }
    

    您还需要将图像放在col-*-2中。

    演示: http://bootply.com/tVyuhaFoww

    10-07 19:24
    查看更多