如何实现面包屑导航与标题的同行显示？

核心原因 #

你使用的d-flex是Bootstrap内置类，若未正确引入Bootstrap核心CSS，该类不会生效，容器会保持默认块级布局，导致<h2>和<ol>作为块级元素上下排列。即使引入了Bootstrap，也需确保自定义CSS未覆盖flex布局的行为。

解决方案 #

方案1：确保Bootstrap CSS正确引入 #

在HTML的<head>中添加Bootstrap的CSS链接（建议使用稳定版本，如5.x）：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

注意需将这段代码放在自定义CSS之前，避免样式冲突。

方案2：不依赖Bootstrap，手动实现flex布局 #

若不想引入Bootstrap，直接修改自定义CSS，给包含标题和面包屑的容器添加flex布局：

.breadcrumbs .d-flex {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
}

同时，为避免<h2>占用过多空间导致面包屑换行，可给<h2>添加压缩限制和间距：

.breadcrumbs h2 {
    font-size: 28px;
    font-weight: 300;
    color: #fff;
    flex-shrink: 0; /* 防止标题被压缩 */
    margin-right: 1rem; /* 给面包屑留出空间 */
}

修改后的完整代码 #

CSS代码 #

.breadcrumbs {
    padding: 15px 0;
    background: #2b2320;
    min-height: 40px;
}

.breadcrumbs h2 {
    font-size: 28px;
    font-weight: 300;
    color: #fff;
    flex-shrink: 0;
    margin-right: 1rem;
}

.breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
    color: #ded5d2;
}

.breadcrumbs ol a {
    color: #fe825a;
}

.breadcrumbs ol li+li {
    padding-left: 10px;
}

.breadcrumbs ol li+li::before {
    display: inline-block;
    padding-right: 10px;
    color: #c8bab5;
    content: "/";
}

@media (max-width: 768px) {
    .breadcrumbs .d-flex {
        display: block !important;
    }

    .breadcrumbs ol {
        display: block;
    }

    .breadcrumbs ol li {
        display: inline-block;
    }
}

HTML代码 #

<section id="breadcrumbs" class="breadcrumbs">
    <div class="container">
        <div class="d-flex justify-content-between align-items-center">
            <h2>Apply</h2>
            <ol>
                <li><a href="/">Home</a></li>
                <li><a href="/Careers">Careers</a></li>
                <li>Apply</li>
            </ol>
        </div>
    </div>
</section>

额外说明 #

• 若之前尝试用row类，需搭配Bootstrap的col类才能实现同行布局（比如把<h2>放在col-auto里，<ol>放在col里），但前提仍是要引入Bootstrap。
• 移动端响应式逻辑已在你的CSS中实现，768px以下会自动切换为块级布局，标题和面包屑上下排列，符合移动端体验。

内容的提问来源于stack exchange，提问作者Convert.ToInt32