在一行中使用整列高度

Question

在引导程序中是否可以采用行以具有完整的列高？我想使用该行内的整个空白并将其添加到col-xs-3列的高度内。

这里是一个例子：

如果您需要更多信息，请告诉我。

Answer 1

Bootstrap的网格系统允许.row是.container（或.container-fluid）的子代，而.col-*-*是.row s的子代。此外，.col-*-*个可以成为其他.row个的父项。

默认情况下，.row的高度由其列确定。如果您希望它具有特定的高度，则可以使用自定义CSS（min-height + display: flex-使其在行换行中的所有列都伸展到相同的高度）来应用它：

.row.my-row {
  min-height: 100vh; /* viewport (screen) height */
  display: flex; /* makes its cols expand to full height */
  flex-wrap: wrap;
 }

例如，如果要从行的最小高度中减去顶栏的高度，则可以使用min-height: calc(100vh - 60px)-其中60px是菜单的高度。