html - 在一行中使用完整的列高

Question

有没有一种可能的方法可以在引导程序中采用一行来获得完整的列高？我想使用行内的整个空白并将其添加到 col-xs-3 列高中。

这是一个例子：

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

标签： htmlcsstwitter-bootstrap-3

Answer 1

Bootstrap 的网格系统允许.rows 成为.container(or .container-fluid) 的孩子，并且允许.col-*-*s 成为 s 的孩子.row。此外，.col-*-*s 可以作为其他 s 的父.row级。

默认情况下，.rows 高度由其列确定。如果你希望它有一个特定的高度，你可以使用自定义 CSS 应用它（min-height+ display: flex- 这使得一行中的所有 cols 都拉伸到相同的高度）：

.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)- where 60pxis menu's height。