如何用Bootstrap Grid解决大屏下图片与Progress Bar的空白问题

问题说明 #

需求布局：

• 大屏（md/lg及以上）：头像居左，右侧显示个人介绍文本，头像正下方排列技能进度条
• 小屏（sm及以下）：个人介绍文本在最上方，技能进度条紧随文本下方

当前代码问题：大屏下过长的介绍文本会将进度条挤至文本区域下方，导致头像与进度条之间出现空白，不符合预期布局。

修改后的完整代码 #

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mon cv - </title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!--main container-->
    <div class="container">
        <header>
            <h1>Bentouhami Faisal</h1>
        </header>
        <!-- Menu Navbar-->
        <nav class="navbar navbar-expand-lg bg-body-tertiary">
            <a class="navbar-brand" href="index.html">Mon Portfolio</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    <li class="nav-item">
                        <a class="nav-link" href="formation.html">Formations</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="exprience.html">Expérience</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="contact.html">Contact</a>
                    </li>
                </ul>
            </div>
        </nav>
    </div>
    <!--end Navbar-->

    <!--header container-->
    <div class="container mt-4">
        <div class="row">
            <!-- 头像 + 进度条区域 -->
            <div class="col-md-3 order-md-1 order-2">
                <img src="images/mon_cv_photo.jpg" alt="Photo de Portfolio" class="rounded-circle mb-3">
                
                <!-- Progression bars -->
                <!-- Compétence : Java -->
                <div class="row mb-2">
                    <div class="col-3">
                        <img src="images/java.png" alt="Java" class="img-fluid">
                    </div>
                    <div class="col-9">
                        <div class="progress">
                            <div class="progress-bar" role="progressbar" style="width: 80%;" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">80%</div>
                        </div>
                    </div>
                </div>
                <!-- Compétence : C# -->
                <div class="row mb-2">
                    <div class="col-3">
                        <img src="images/c-sharp.png" alt="C#" class="img-fluid">
                    </div>
                    <div class="col-9">
                        <div class="progress">
                            <div class="progress-bar" role="progressbar" style="width: 70%;" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">70%</div>
                        </div>
                    </div>
                </div>
                <!-- Compétence : HTML -->
                <div class="row mb-2">
                    <div class="col-3">
                        <img src="images/html-5.png" alt="HTML" class="img-fluid">
                    </div>
                    <div class="col-9">
                        <div class="progress">
                            <div class="progress-bar" role="progressbar" style="width: 90%;" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100">90%</div>
                        </div>
                    </div>
                </div>
                <!-- Compétence : CSS -->
                <div class="row mb-2">
                    <div class="col-3">
                        <img src="images/css-3.png" alt="CSS" class="img-fluid">
                    </div>
                    <div class="col-9">
                        <div class="progress">
                            <div class="progress-bar" role="progressbar" style="width: 85%;" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100">85%</div>
                        </div>
                    </div>
                </div>
                <!-- Compétence : Bootstrap -->
                <div class="row mb-2">
                    <div class="col-3">
                        <img src="images/bootstrap.png" alt="Bootstrap" class="img-fluid">
                    </div>
                    <div class="col-9">
                        <div class="progress">
                            <div class="progress-bar" role="progressbar" style="width: 75%;" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">75%</div>
                        </div>
                    </div>
                </div>
                <!-- Compétence : Php -->
                <div class="row mb-2">
                    <div class="col-3">
                        <img src="images/php.png" alt="Php" class="img-fluid">
                    </div>
                    <div class="col-9">
                        <div class="progress">
                            <div class="progress-bar" role="progressbar" style="width: 75%;" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">75%</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 文本介绍区域 -->
            <div class="col-md-9 order-md-2 order-1">
                <h2><b>Développeur Full Stack</b></h2>
                <p class="intro-text">36 ans <br> tant que développeur Full Stack, je possède une expertise complète dans la conception, le développement et la maintenance d'applications web. <br> Avec une solide formation en informatique de gestion et une passion pour la programmation, je suis capable de gérer tous les aspects d'un projet, tant sur le plan front-end que back-end. Grâce à ma maîtrise des langages de programmation tels que HTML, CSS, JavaScript, ainsi que des frameworks populaires tels que React et Angular, je peux créer des interfaces utilisateur attrayantes et réactives.<br> En tant que Full Stack développeur, je suis également à l'aise avec les technologies de développement back-end telles que Node.js et Python, ce qui me permet de créer des API performantes et de mettre en place des architectures logicielles robustes. <br>Je suis également familier avec les concepts de déploiement et d'hébergement, et je peux travailler avec des outils tels que Docker et AWS pour assurer une mise en production fluide et sécurisée. <br>En résumé, en tant que développeur Full Stack, je suis en mesure de concevoir, développer et optimiser des applications web complètes, offrant une expérience utilisateur exceptionnelle et des fonctionnalités performantes. Je suis passionné par mon métier et je m'efforce constamment de rester à jour avec les dernières tendances et les meilleures pratiques du développement web.</p>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
</body>
</html>

关键修改点 #

1. 结构重组：将头像和所有进度条放入同一个col-md-3容器中，确保进度条始终紧跟在头像下方，不会被文本区域挤开
2. 响应式排序：使用Bootstrap的order-*类，大屏时头像列在前、文本列在后；小屏时文本列在前、头像+进度条列在后，满足小屏布局需求
3. 冗余代码清理：移除原代码中多余的空row标签，修复了h2与p标签的错误嵌套问题
4. 间距优化：给头像添加mb-3类，增加头像与进度条之间的合理间距

内容的提问来源于stack exchange，提问作者Just Relax قناة هدوء