如何用Bootstrap实现图片与文字并排对齐并保证响应式？

架构老林

2026-8-18

问题：Bootstrap栅格实现图片文字并排失败，需响应式解决方案

我想要实现图片与文字并排展示的效果，但使用Bootstrap栅格系统后呈现的效果不符合预期。请提供方案帮我实现目标样式，同时保证网站的响应式特性，以下是我的代码：

原HTML代码

<!DOCTYPE html>
<html>

<head>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
    <!-- Own CSS-->
    <link rel="stylesheet" href="stayil.css">
    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link
        href="https://fonts.googleapis.com/css2?family=Great+Vibes&family=Montserrat:wght@300;400;600;700&display=swap"
        rel="stylesheet">
    <title>Bati Gozen</title>
</head>

<body>
    <!-- Navbar -->
    <header id="home">
        <nav class="navbar navbar-expand-lg">
            <div class="container-fluid">
                <a class="navbar-brand" href="#home">Batı Gözen</a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                    data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false"
                    aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
                    <div class="navbar-nav">
                        <a class="nav-link" aria-current="page" href="#">Home</a>
                        <a class="nav-link" href="#mywork">My Work</a>
                        <a class="nav-link" href="#resume">CV</a>

                    </div>
                </div>
            </div>
        </nav>
        <!-- Explanation !!!!!!!!I HAVE PROBLEM HERE!!!!!!!!-->
        <div class="container-fluid text-center mt-3">
            <div class="row justify-content-center">
                <div class="col-12">
                    <img src="images/IMG_0109.jpg" alt="My Picture" class="img-fluid myimage">
                    <h1 class="name mt-4 mb-3">Batı Gözen</h1>
                    <p class="caption">"Web Developer, Mix&Masterig Specialist"</p>
                </div>
            </div>
        </div>
        </div>
        <div class="container-fluid text-center ib-section">
            <div class="row">
                <div class="col-6">
                    <div class="col-6"><img class="img-fluid ib" src="images/ibimag.png" alt="IB"></div>
                </div>
                <div class="col-6 m-auto">
                    <h3 class="img-fluid"> IB Student, 12.th Grade</h3>
                </div>
            </div>
    </header>
    <!-- Photo Gallery -->
    <section id="mywork">
        <h3>My Work</h3>
        <div class="continer-fluid">
            <div class="row">
                <div class="col-lg-4 col-md-4 col-sm-12 col-12">
                    <img src="images/1.png" alt="Certificate" class="basari">
                </div>
                <div class="col-lg-4 col-md-4 col-sm-12 col-12">
                    <img src="images/2.png" alt="Certificate" class="basari">
                </div>
                <div class="col-lg-4 col-md-4 col-sm-12 col-12">
                    <img src="images/3.jpg" alt="Certificate" class="basari">
                </div>
            </div>
            <div class="row paddingekle">
                <div class="col-lg-4 col-md-4 col-sm-12 col-12">
                    <img src="images/1.png" alt="Certificate" class="basari">
                </div>
                <div class="col-lg-4 col-md-4 col-sm-12 col-12">
                    <img src="images/5.png" alt="Certificate" class="basari">
                </div>
                <div class="col-lg-4 col-md-4 col-sm-12 col-12">
                    <img src="images/6.jpg" alt="Certificate" class="basari">
                </div>
            </div>
        </div>
    </section>
    <!-- Resume -->
    <section id="resume">
        <h3>My Resume</h3>
        <button class="btn btn-lg btn-light">
            <a href="images/Bati's+Resume+(4).pdf" class="pdf"><i class="far fa-file-pdf"></i> Download</a>
        </button>
    </section>
    <!-- Bootsrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3"
        crossorigin="anonymous"></script>
</body>
</html>

原CSS代码

body {
  background-color: #CDF0EA;
  font-family: 'Montserrat', sans-serif;
}

.ib-section {
  margin: 60px 0;
}

.ib {
  max-width: 200px;
}

.name {
  font-family: 'Great Vibes', cursive;
  font-size: 4.8rem;
  letter-spacing: 0.3px;
}

.caption {
  font-size: 1.4rem;
  letter-spacing: 0.8px;
}

.myimage {
  max-width: 18%;
  border-radius: 14%;
}

.navbar-brand,
.nav-link {
  color: #555555;
}

.navbar-brand {
  margin-left: 10px;
}

.navbar-brand:hover,
.nav-link:hover {
  color: black;
}

问题分析

图片所在列嵌套了多余的col-6，导致图片被额外栅格约束，无法正常占据父列宽度
外层text-center强制所有内容居中，破坏了栅格的横向排列逻辑
缺少响应式断点设置，小屏幕下布局会混乱

解决方案

修改ib-section对应的HTML结构，并微调CSS保证响应式对齐：

修改后的HTML（重点部分）

<!-- 替换原ib-section的div -->
<div class="container-fluid ib-section">
    <div class="row align-items-center justify-content-center">
        <div class="col-md-4 col-sm-6 text-center">
            <img class="img-fluid ib" src="images/ibimag.png" alt="IB">
        </div>
        <div class="col-md-6 col-sm-6">
            <h3>IB Student, 12.th Grade</h3>
        </div>
    </div>
</div>

修改后的完整CSS

body {
  background-color: #CDF0EA;
  font-family: 'Montserrat', sans-serif;
}

.ib-section {
  margin: 60px 0;
}

.ib {
  max-width: 200px;
}

.name {
  font-family: 'Great Vibes', cursive;
  font-size: 4.8rem;
  letter-spacing: 0.3px;
}

.caption {
  font-size: 1.4rem;
  letter-spacing: 0.8px;
}

.myimage {
  max-width: 18%;
  border-radius: 14%;
}

.navbar-brand,
.nav-link {
  color: #555555;
}

.navbar-brand {
  margin-left: 10px;
}

.navbar-brand:hover,
.nav-link:hover {
  color: black;
}

/* 小屏幕下文字居中 */
@media (max-width: 767px) {
  .ib-section h3 {
    text-align: center;
    margin-top: 1rem;
  }
}

修改说明

移除外层text-center，仅给图片列添加text-center保证图片居中
删除图片嵌套的多余col-6，让图片直接处于栅格列中
使用align-items-center实现行内元素垂直居中，justify-content-center让整体布局在容器内居中
添加响应式断点：中等屏幕（≥768px）下图片占4列、文字占6列；小屏幕（<768px）下各占6列，超小屏幕自动堆叠
新增媒体查询，小屏幕下文字自动居中，提升移动端体验

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

如何用Bootstrap实现图片与文字并排对齐并保证响应式？

原HTML代码 #

原CSS代码 #

问题分析 #

解决方案 #

修改后的HTML（重点部分） #

修改后的完整CSS #

修改说明 #