Bootstrap中如何让两个行内块在移动端垂直堆叠？

这事儿其实很简单，Bootstrap的响应式工具类或者网格系统都能完美解决。我给你写了一个直接就能运行的完整代码示例，你可以直接复制过去测试：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap响应式行内块排列</title>
    <!-- 引入Bootstrap CSS CDN -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        /* 自定义样式，让元素更直观，可根据需求修改 */
        .custom-block {
            padding: 20px;
            background-color: #f0f0f0;
            border: 1px solid #ddd;
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <div class="container mt-5">
        <!-- 方案1：使用响应式工具类 -->
        <h3>方案1：响应式工具类实现</h3>
        <div class="d-block d-md-inline-block custom-block">
            第一个行内块元素
        </div>
        <div class="d-block d-md-inline-block custom-block">
            第二个行内块元素
        </div>

        <!-- 方案2：使用Bootstrap网格系统（更推荐，布局更灵活） -->
        <h3 class="mt-4">方案2：网格系统实现</h3>
        <div class="row">
            <div class="col-md-6 mb-3 mb-md-0 custom-block">
                第一个网格元素（移动端占满宽度，桌面端占一半）
            </div>
            <div class="col-md-6 custom-block">
                第二个网格元素（移动端占满宽度，桌面端占一半）
            </div>
        </div>
    </div>

    <!-- 可选：引入Bootstrap JS（如果需要用到交互组件的话） -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

关键知识点解释： #

• 方案1的核心：d-block让元素在小屏幕（移动端）下是块级元素，自动上下排列；d-md-inline-block让元素在中等屏幕（≥768px）及以上变成行内块，实现并排效果。
• 方案2的核心：Bootstrap网格系统的col-md-6表示在中等屏幕及以上，每个元素占12列中的6列（也就是一半宽度），而在移动端（小于768px），列会自动堆叠成块级元素，自然上下排列。这种方式更适合复杂布局，扩展性更强。
• 自定义样式部分只是为了让元素更显眼，你可以根据自己的需求修改背景色、内边距等样式。

你可以把这段代码保存成HTML文件，在浏览器里打开，然后调整窗口大小，就能看到移动端和桌面端的不同效果啦～

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