suchen

Heim  >  Fragen und Antworten  >  Hauptteil

Wie kann die Lücke zwischen dem Bild und dem Fortschrittsbalken auf einem großen Bildschirm mithilfe des Bootstrap Grid-Systems behoben werden?

Lassen Sie mich Ihnen zunächst die Idee dieses Bildes zeigen: Bild (1) In diesem Bild sehen wir, dass sich im MD/LG-Bildschirm der Fortschrittsbalken unterhalb des Bildes und der Text auf der rechten Seite davon befindet.

In Bild (2) kommt bei kleinen Bildschirmgrößen der Text an zweiter Stelle und der Fortschrittsbalken an letzter Stelle:

Was ich versuche, ist dieser Code: 

<!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.

                                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>      
                    <!-- 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>

Malen Sie rot, wo der Fortschrittsbalken sein sollte.

Das Problem ist, dass der Text auf einem großen Bildschirm zu groß ist und dadurch ein weißer Hohlraum zwischen dem Bild und dem Fortschrittsbalken entsteht, der die Fortschrittslinie verschiebt! Schauen Sie sich diesen Bildschirm an:

P粉409742142P粉409742142486 Tage vor681

Antworte allen(1)Ich werde antworten

  • P粉518799557

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

    实现这个“使用 Bootstrap 的网格系统”的一种方法（实际上，这并不完全是一个网格系统，而是一个弹性系统）是在代码中放置进度条两次（一次在图片之后和文本之后一次）并使用显示实用程序类显示/隐藏它们（v4 文档、v5 文档）。

    图片下面的应该有.d-none.d-md-block，文字下面的应该有.d-block.d-md-none代码>.
    如果您希望它们在不同的断点处交换，请将 md 更改为 sm 或 lg。
    如果您应用此元素的默认显示为“flex”，请将 *-block 替换为 *-flex 类。

    在此处查看其工作情况。

    或者，您可以复制文本（而不是进度条）并应用相同的技术。

    注释：

    • 此技术的主要缺点是它使向重复元素或其后代应用/删除事件侦听器变得过于复杂。
      然而，一些前端框架（Vue、React）提供内置的“门户”组件，这些组件本质上能够在目标元素内渲染其内容，并根据控制器逻辑放置在 DOM 中的不同位置，而不会丢失事件（元素没有被破坏，而是被移动）。据我所知，Angular 并没有提供开箱即用的功能。不过，可能有一个插件。

    • 如果这三个元素都是同一父元素的子元素，则使用定制 CSS 也可以实现此布局，在父元素上使用 display: grid 并定义 grid-template-区域（或grid-template-rows和grid-template-columns）响应式。但这意味着放弃该容器的 Bootstrap 网格系统，并且必须编写自己的 CSS 来响应地控制列宽。

    • 从您制作的草图中并不清楚您是否希望文本在移动设备上可滚动，而图片固定顶部且进度条固定底部。这无疑会产生有问题的用户体验。移动设备上更好的用户体验是让整个页面可滚动。

    • 您的标记 (HTML) 无效：您过早关闭了标题的

      ，而且您也没有关闭所有布局

    • 其他标记问题：请勿在 元素内使用

      （反之亦然）；不要将多个段落放在同一个

      元素中，并避免使用
      标签；切勿将 .row 放置为另一个 .row 的直接子级（您应该将其包装在 .col 中）。并确保您的代码通过 HMTL 验证。

    我已经修复了上面提供的示例中提到的所有内容。

    Antwort
    0
  • StornierenAntwort