如何增大现有Bootstrap前端代码中container类的高度

你当前使用的是Bootstrap框架，可通过以下两种常见方式调整高度：

• 自定义CSS调整（灵活性更高）
  若只需修改当前页面的container高度，可先给该元素新增自定义类避免样式污染：

  <!-- 修改前：<div class="container"> -->
  <div class="container login-container">
  

  再在样式表中添加对应规则，数值可按需调整：

  /* 固定高度 */
  .login-container {
    height: 850px;
  }
  /* 也可设置最小高度，适配内容长度变化 */
  /*
  .login-container {
    min-height: 90vh;
  }
  */
  

• 用Bootstrap内置工具类快速修改
  直接在container的class属性中添加高度工具类即可，无需额外写CSS：

  <!-- 示例：设置最小高度为视口的80% -->
  <div class="container min-vh-80">
  <!-- 示例：设置高度为父元素的75% -->
  <!-- <div class="container h-75"> -->
  

补充注意：你的

标签设置了align-items-center类，会让container在父元素内垂直居中，若调整高度后不需要居中效果，可移除align-items-center类或替换为align-items-start。

当前效果示意图：

内容的提问来源于stack exchange，提问作者EDP