先給大家展示一下這張圖的思路:圖片(1)在這張圖中我們看到，在md/lg的屏幕中，進度條在圖片的下方，文字在它的右側。
在圖片(2)中，在小屏幕尺寸下，文本排在第二，進度條排在最后:
我嘗試做的是這個代碼:
<!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 rel="stylesheet" href="style.css">
<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>
<div class="container">
<!--main 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">
<div class="row row-cols-auto">
<!-- Picture -->
<div class="col-sm-12 col-md-3">
<img src="images/mon_cv_photo.jpg" alt="Photo de Portfolio" class="rounded-circle">
</div>
<div class="col-sm-8">
<h2 class="intro-text">
<p><b> Développeur Full Stack</b></h2></p>
<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.
Grace à 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>
<!-- Progression bars -->
<div class="row">
</div>
<div class="col-3">
<div class="row">
<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">
<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">
<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">
<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">
<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">
<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="70"
aria-valuemin="0" aria-valuemax="100">75%</div>
</div>
</div>
</div>
</div>
</div>
</div>
</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>
<!--end 1st container-->
</body>
</html>在進度條應該在的地方標上紅色。
問題是當我在大屏幕上時，文本太大了，在圖片和進度條之間產生了一個白色的空白！ 看一下這個屏幕:
實現這一點的一個方法是& quot使用Bootstrap網格系統& quot(實際上，這并不完全是一個網格系統，而是一個flex系統)是在代碼中放置進度條兩次(一次在圖片之后，一次在文本之后)，并使用顯示實用程序類(v4 docs，v5 docs)顯示/隱藏它們。
圖片下面的應該有。d-none.d-md-block和正文下面那個應該有。d擋. d-MD-無。 如果您希望它們在不同的斷點處交換，請將md更改為sm或lg。 和swap *-block for *-flex類，如果您應用它的元素的默認顯示是& quotflex & quot。
看到它在這里工作。
或者，您可以復制文本(而不是進度條)并應用相同的技術。
注意事項:
這種技術的主要缺點是將事件監聽器應用/移除到復制的元素或其后代過于復雜。 然而，一些前端框架(Vue，React)提供了內置的& quot門戶& quot本質上，組件能夠根據控制器邏輯，在放置在DOM中不同位置的目標元素中呈現其內容，而不會丟失事件(元素不會被銷毀，而是被移動)。據我所知，Angular不提供開箱即用的功能。不過，可能會有一個插件。
如果這三個元素都是同一個父元素的子元素，那么使用定制CSS也可以實現這種布局，在父元素上使用display: grid并定義grid-template-areas(或grid-template-rows & amp；網格-模板-列)。但是這將意味著放棄Bootstrap的網格系統，而必須編寫自己的CSS來響應地控制列寬。
從你畫的草圖來看，不清楚你是否想讓文字在手機上滾動，而圖片固定在頂部，進度條固定在底部。這無疑會制造出可疑的UX。移動設備上更好的用戶體驗是讓整個頁面可滾動。
您的標記(HTML)無效:您正在關閉& lth2 & gt標題太快，你也沒有關閉所有布局& ltdiv & gtit’沒錯。原則上，您的IDE應該為您突出顯示這些。最有可能的是，如果你為面試/工作申請提交了這段代碼，你會因為沒有使用IDE而立刻被取消資格(或者不知道如何設置IDE——對于雇主來說，它們意味著同樣的事情)。
其他標記問題:不要使用& ltp & gt內部& lth * & gt元素(反之亦然)；不要將多個段落放在同一個& ltp & gt元素，并避免使用& ltbr & gt標簽；不要將一行作為另一行的直接子行。row(你應該用. col把它包起來)。并確保您的代碼通過HMTL驗證。
我已經解決了上面提供的例子中提到的所有問題。