Bagaimana untuk membetulkan jurang antara imej dan bar kemajuan pada skrin besar menggunakan sistem Grid Bootstrap?-Soal Jawab Rangkaian PHP Cina

Biar saya tunjukkan idea gambar ini dahulu: Gambar (1) Dalam gambar ini kita lihat bahawa dalam skrin md/lg, bar kemajuan terletak di bawah gambar dan teks berada di sebelah kanannya.

Dalam gambar (2), pada saiz skrin kecil, teks berada di tempat kedua dan bar kemajuan berada di tempat terakhir:

Apa yang saya cuba lakukan ialah kod ini:

     Mon cv -     
     Bentouhami Faisal
 
   Mon Portfolio     Formations 
  Expérience 
  Contact 
 
 
 
 
        
    Développeur Full Stack
  36 ans 
 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. 
 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.
 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. 
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. 
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. 
 
 
   
     
   80%
 
 
 
     
   70%
 
 
 
     
   90%
 
 
 
     
   85%
 
 
 
     
   75%
 
 
 
     
   75%

membalas semua (1)

P粉5187995572023-09-15 00:28:55 Tingkat 1

Salah satu cara untuk melaksanakan "sistem grid menggunakan Bootstrap" ini (sebenarnya, ini bukan sistem grid, tetapi sistem flex) adalah dengan meletakkan bar kemajuan dua kali dalam kod (sekali selepas imej dan sekali selepas teks) dan tunjukkan/sembunyikannya menggunakan kelas utiliti paparan (v4 dokumentasi,v5 dokumentasi).

Perlu ada.d-none.d-md-block，文字下面的应该有.d-block.d-md-nonekod> di bawah gambar.
Jika anda mahu mereka bertukar pada titik putus yang berbeza, tukarmd更改为sm或lg.
Jika anda menggunakan paparan lalai elemen ini untuk "flex", gunakan kelas*-block替换为*-flex.

Lihat ia beraksidi sini.

Sebagai alternatif, anda boleh menyalin teks (bukan bar kemajuan) dan menggunakan teknik yang sama.

Nota:

Kelemahan utama teknik ini ialah ia menjadikan pengaplikasian/penyingkiran pendengar acara kepada elemen berulang atau keturunannya terlalu rumit.
Walau bagaimanapun, beberapa rangka kerja bahagian hadapan (Vue, React) menyediakan komponen "portal" terbina dalam yang pada asasnya dapat memaparkan kandungannya dalam elemen sasaran dan diletakkan di lokasi yang berbeza dalam DOM berdasarkan logik pengawal tanpa kehilangan peristiwa ( The elemen tidak dimusnahkan, tetapi dipindahkan). Setakat yang saya tahu, Angular tidak menyediakan fungsi ini di luar kotak. Mungkin terdapat pemalam untuk ini, walaupun.
Reka letak ini juga boleh dicapai menggunakan CSS tersuai jika ketiga-tiga elemen adalah anak kepada elemen induk yang sama, menggunakandisplay: grid并定义grid-template-区域（或grid-template-rows和grid-template-columns) Responsif pada elemen induk. Tetapi ini bermakna meninggalkan sistem grid Bootstrap bekas dan perlu menulis CSS anda sendiri untuk mengawal lebar lajur secara responsif.
Tidak jelas daripada lakaran yang anda buat sama ada anda mahu teks boleh ditatal pada mudah alih, manakala imej ditetapkan di bahagian atas dan bar kemajuan ditetapkan di bahagian bawah. Ini sudah pasti akan mewujudkan pengalaman pengguna yang bermasalah. Pengalaman pengguna yang lebih baik pada peranti mudah alih ialah menjadikan keseluruhan halaman boleh ditatal.
Penanda tidak sah (HTML): Anda menutup tajuk
lebih awal dan anda tidak menutup semua reka letak代码正确。原则上，您的 IDE 应该为您突出显示这些内容。最有可能的是，如果您提交此代码用于面试/工作申请，您将因不使用 IDE（或不知道如何设置 - 对于雇主而言，它们的意思是相同的）而立即被取消资格。
Isu markup lain: jangan gunakan 元素内使用（反之亦然）；不要将多个段落放在同一个元素中，并避免使用标签；切勿将.row放置为另一个.row的直接子级（您应该将其包装在.col dalam elemen


            
             (atau sebaliknya); jangan letakkan berbilang perenggan dalam elemen
             yang sama , dan elakkan menggunakan teg
             
; jangan sekali-kali meletakkan.row sebagai anak langsung .row yang lain (anda harus membungkusnya dengan .col ). Dan pastikan kod anda melepasi pengesahan HMTL. Saya telah menetapkan semua yang dinyatakan dalam contoh yang disediakan di atas.