如何使用Bootstrap将红框内容放置在卡片底部角落？

你遇到的问题核心在于.vstack类的默认行为与当前flex布局组合冲突，导致无法将搜索框推至底部。以下是具体修复方案：

关键修改点 #

1. 移除最外层容器的.vstack类，改用.flex-column明确垂直flex方向
2. 给搜索框所在容器添加.mt-auto，利用margin自动填充上方空间，将其推至视口底部
3. 保留.align-items-center让卡片水平居中，同时用.min-vh-100确保容器占满视口高度

修改后的完整代码 #

<div class="container min-vh-100 d-flex flex-column align-items-center">

    <div class="myCard gradient-day shadow px-3 pt-5 m-5 rounded">
        <div class="container">
            <div class="row">
                <div class="col">
                    <h1 id="day-of-week">Tuesday</h1>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <h4 id="todays-date">Jan 2nd 2023</h4>
                </div>
            </div>
            <div class="row d-flex align-items-center g-3">
                <div class="col-1">
                    <h5><i class="fa-solid fa-location-dot"></i></h5>
                </div>
                <div class="col">
                    <h3 id="city-name">City Name</h3>
                </div>
            </div>
            <div class="row row-cols-1">
                <div class="col">
                    <h1 id="temperature">51 °F</h1>
                </div>
                <div class="col">
                    <h4 id="weather">Sunny</h4>
                </div>
            </div>
        </div>
    </div>

    <!-- 添加mt-auto将此容器推至底部 -->
    <div class="container mt-auto">
        <form action="" id="searchForm">
            <div class="mx-5">
                <input type="text" class="form-control" placeholder="search for city" name="query" autofocus>
            </div>
        </form>
    </div>

</div>

为什么之前的方法无效？ #

• .justify-self-end仅适用于grid布局，在flex布局中不生效
• .align-items-center控制的是flex容器交叉轴（水平方向）的对齐，无法实现垂直方向的位置调整，需要用margin-top:auto来完成
• .vstack类默认会给子元素添加align-items:stretch和固定间距，干扰了自定义对齐逻辑

更优布局方案 #

如果想简化结构，可以去掉最外层的.container，直接用flex容器占满视口，同时给卡片添加.mx-auto实现水平居中：

<div class="min-vh-100 d-flex flex-column p-4">
    <div class="myCard gradient-day shadow px-3 pt-5 m-5 rounded mx-auto">
        <!-- 卡片内部内容不变 -->
    </div>
    <div class="container mt-auto">
        <!-- 搜索框不变 -->
    </div>
</div>

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