响应式设计中如何在不同容器中展示同一搜索栏？

不用重复搜索栏元素，也不用定位偏移，我们可以通过CSS Grid的响应式区域分配来实现搜索栏在不同屏幕尺寸下的父容器切换，同时结合你正在使用的Bootstrap类保证样式一致性。

步骤1：调整HTML结构 #

把搜索栏从顶部菜单中独立出来，放在最外层容器中，同时给相关元素添加语义化类名方便CSS定位：

<div class="layout-container">
    <!-- top section -->
    <div class="main-padding top-menu row">
        <!-- login btn-->
        <div class="login-btn center col-md-2 col-2 d-flex justify-content-end vertical-line">
            <a href="#" class="btn btn-login" id="main-login">
                <img class=" login-icon" src="~/person.png" id="login" />
                <span class="login-text" id="login-text">ورود/ثبت نام</span>
            </a>
        </div>
        <!-- shopping cart -->
        <div class="shopping-cart col-md-1 col-2 d-flex justify-content-start" id="main-cart">
            <img class="shopping-cart-icon" src="~/shoppingcart.png" id="cart" />
        </div>
    </div>

    <!-- 独立的搜索栏 -->
    <div class="search-bar center col-md-7 col-12">
        <div class="input-group center">
            <input class="form-control textbox-search" placeholder="جست‌و‌جوی محصولات">
            <button type="button" class=" btn-search btn">
                <i class="fa fa-search m-3"></i>
            </button>
        </div>
    </div>

    <!-- bottom section -->
    <div class="bottom-section">
        <!-- 你的底部菜单/汉堡菜单代码 -->
        <p>底部菜单区域（移动端显示搜索栏）</p>
    </div>
</div>

步骤2：添加CSS响应式布局 #

通过Grid布局在不同断点下分配搜索栏的位置：

/* 基础布局容器 */
.layout-container {
    display: grid;
    gap: 0;
}

/* PC端（Bootstrap md断点及以上，≥768px） */
@media (min-width: 768px) {
    .layout-container {
        grid-template-areas: 
            "top-menu top-menu top-menu"
            "bottom-section bottom-section bottom-section";
    }
    /* 顶部菜单内部用Grid分配搜索、登录、购物车的位置 */
    .top-menu {
        display: grid;
        grid-template-columns: 7fr 2fr 1fr; /* 对应col-md-7、col-md-2、col-md-1的比例 */
        grid-template-areas: "search login cart";
        align-items: center;
    }
    .search-bar {
        grid-area: search; /* 把搜索栏放到顶部菜单的search区域 */
    }
    .login-btn {
        grid-area: login;
    }
    .shopping-cart {
        grid-area: cart;
    }
}

/* 移动端（小于md断点，<768px） */
@media (max-width: 767.98px) {
    .layout-container {
        grid-template-areas: 
            "top-menu"
            "search-bar"
            "bottom-section";
    }
    /* 顶部菜单只保留登录和购物车 */
    .top-menu {
        display: grid;
        grid-template-columns: 2fr 2fr; /* 对应col-2、col-2的比例 */
        grid-template-areas: "login cart";
        align-items: center;
    }
    .search-bar {
        grid-area: search-bar; /* 搜索栏单独占据一行，位于顶部菜单和底部菜单之间 */
        padding: 0 1rem; /* 和顶部菜单保持一致的内边距 */
    }
}

方案优势 #

• 完全没有重复DOM元素，避免维护两个搜索栏的冗余问题
• 没有使用position: top/margin这类偏移定位，布局完全由CSS Grid控制，符合语义化和响应式设计原则
• 结合Bootstrap的断点和栅格比例，保持原有样式的一致性
• 代码简洁，后续维护成本低

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