Bootstrap注册卡片高度铺满屏幕问题求助

你的注册卡片铺满整个屏幕，大概率是父容器的布局导致卡片被强制拉伸，不是卡片本身的height:auto问题，试试下面几个方案：

方案1：检查并调整父容器样式 #

如果卡片的父元素（比如<body>或者外层<div>）设置了height: 100%，或者用了flex布局且align-items: stretch（flex容器默认值），就会让卡片被拉伸到父容器高度。

• 若父元素是flex容器，给它加align-items: flex-start，让子元素（卡片）只占自身内容高度；
• 若父元素设置了height: 100%，去掉这个设置，或者改成min-height: 100vh——既保证页面高度，又不强制子元素继承高度。

方案2：给卡片添加自适应限制 #

直接给卡片元素加样式，强制它只适应内容高度：
把卡片的inline样式改成：

<div class="card border-dark bg-white text-dark" style="width: 400px; margin: 10px auto; align-self: flex-start;">

或者用max-height限制：

<div class="card border-dark bg-white text-dark" style="width: 400px; margin: 10px auto; max-height: fit-content;">

方案3：简化卡片样式，去掉多余设置 #

Bootstrap的card组件默认就是高度自适应内容的，你可以直接去掉height: auto（这是默认值，加了反而可能和其他样式冲突），只保留宽度和外边距：

<div class="card border-dark bg-white text-dark" style="width: 400px; margin: 10px auto;">

修改后的完整代码示例 #

<!-- 外层用flex布局实现页面居中，同时避免拉伸卡片 -->
<div style="display: flex; justify-content: center; min-height: 100vh; align-items: flex-start; padding-top: 20px;">
    <div class="card border-dark bg-white text-dark" style="width: 400px;">
        <div class="card-header">
            <h3>Register to REFILM</h3>
        </div>
        <div class="card-body">
            <form action="/register" method="post">
                <div class="mb-3">
                    <input autocomplete="off" autofocus type="text" class="form-control" name="username" placeholder="Username">
                </div>
                {% if username_error %}
                    <div class="alert alert-danger" role="alert">
                    {{ username_error }}
                    </div>
                {% endif %}
                <div class="mb-3">
                    <input type="password" class="form-control" name="password" placeholder="Password">
                </div>
                {% if password_error %}
                    <div class="alert alert-danger" role="alert">
                    {{ password_error }}
                    </div>
                {% endif %}
                <div class="mb-3">
                    <input type="password" class="form-control" name="confirmation" placeholder="Confirm password">
                </div>
                {% if confirmation_error %}
                    <div class="alert alert-danger" role="alert">
                    {{ confirmation_error }}
                    </div>
                {% endif %}
                <div class="col text-center">
                    <button type="submit" class="btn btn-primary">Register</button>
                </div>
            </form>
        </div>
    </div>
</div>

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