لماذا توجد فجوة في الجانب الأيمن من الحاوية في صفحة html

محمد لارافيل · 11 فبراير 2023

أنا أعمل على مهمة ولا يسمح لي إلا باستخدام HTML و CSS و Bootstrap. لقد بدأت مشروعي وسار كل شيء على ما يرام حتى لاحظت وجود فجوة في الجانب الأيمن من الحاوية. لماذا هذا وكيف يمكنني إزالتها؟

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tarea Bootstrap</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
    <link rel="stylesheet" href="/style.css">
    <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=Anton&family=Saira+Condensed&display=swap" rel="stylesheet">
</head>
<body>
    <div class="container-fluid" style="padding-left: 0; padding-right: 0;">

        <!-- Header -->
        <header></header>

        <nav class="navbar justify-content-center navbar-dark bg-dark">
            <div>
                <ul class="nav nav-pills nav-fill">
                    <li class="nav-item">
                        <a href="/index.html" class="nav-link active bg-secondary text-warning navhome">Home</a>
                    </li>
                    <li class="nav-item">
                        <a href="/care.html" class="nav-link text-white navhowto">Pet Care</a>
                    </li>
                    <li class="nav-item">
                        <a href="/volunt.html" class="nav-link text-white navvolunteer">Volunteer</a>
                    </li>
                    <li class="nav-item">
                        <a href="/adopt.html" class="nav-link text-white navadopt">Adopt an friend!</a>
                    </li>
                    <li class="nav-item">
                        <a href="/donate.html" class="nav-link text-white navpets" ">Donate</a>
                    </li>
                    <li class="nav-item">
                        <a href="/contact.html" class="nav-link text-white navcontact">Contact us</a>
                    </li>
                  </ul>
            </div>
        </nav>

        <main>
            <div class="row row-cols-1 sec1 box">
                <div class="col">
                    <img class="img-fluid rounded mx-auto mt-5 d-block" src="/img/logo.png">
                </div>
            </div>
            <div class="row row-cols-1 sec2 box" style="width: 100%;">
                <div class="col mt-3">
                    <h1>Who we are:</h1>
                </div>
                <div class="col mb-5 text-center">
                    <p>The New Hope Animal Shelter NHAS is a registered charity that has been operating for 150 years. The Society provides care, comfort and compassion to animals in need in communities across the country. It values all animals and advocates to treat them with respect and kindness. The Society strives to keep pets and families together and do so through a variety of community support services, such as sheltering and adoptions, including emergency sheltering, feral cat management programs, animal transfers, food distribution, humane education, animal advocacy, and spay/neuter services. The NHAS does not receive annual government funding and relies on donations to provide programs and services to help animals in need.</p>
                </div>
            </div>
            <div class="row row-cols-1 sec3 box">
                <div class="col align-self-center">
                    <h1>Compassion for animals is intimately connected with goodness of character; and it may be confidently asserted that he who is cruel to animals cannot be a good man.</h1>
                    <p>-S. Chopenhauer</p>
                </div>
            </div>
            <div class="row row-cols-1 sec4 box">
                <div class="col">
                    <h1>From our Supporters</h1>
                </div>
                <div id="carouselExampleControls" class="col carousel slide" data-bs-ride="carousel">
                    <div class="carousel-inner">
                        <div class="carousel-item active">
                        <img src="img/carousel1.jpg" class="d-block w-100" alt="...">
                        </div>
                        <div class="carousel-item">
                        <img src="img/carousel2.jpg" class="d-block w-100" alt="...">
                        </div>
                        <div class="carousel-item">
                        <img src="https://images.pexels.com/photos/540518/pexels-photo-540518.jpeg" class="d-block w-100" alt="...">
                        </div>
                    </div>
                    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="visually-hidden">Previous</span>
                    </button>
                    <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="visually-hidden">Next</span>
                    </button>
                </div>
            </div>
        </main>

        <section>
            
        </section>

        <footer>
            <p></p>
        </footer>

    </div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</body>
</html>

CSS

html{
    height: 100%;
    width: 100%;
}

body{
    background-color: #116D44;
    background-position: center;
}

    header{
        align-items: center;
    }

    nav{
        font-family: 'Saira Condensed', sans-serif;
    }

        .box{
            width: 100%;
            height: 600px;
            padding: 40px 60px;
            color: white;
            font-family: 'Saira Condensed', sans-serif;
            text-align: center;
        }  

            .box h1{
                font-family: 'Anton', sans-serif;
                font-size: 50px;
                text-shadow: 0px 0px 5px #000;
            }

            .box p{
                font-size: 25px;
                margin-top: 100px;
            }

        .sec1{
            height: 100vh;
            background-image: url(/img/indexbg1.jpg);
            background-attachment: fixed;
            background-size: cover;
        }

        .sec2{
            background: #28689c;
        }

        .sec3{
            height: 100vh;
            background-image: url(/img/indexbg2.jpg);
            background-attachment: fixed;
            background-size: cover;
        }

            .carousel{
                width: 640px;
                height: 360px;
                margin: 0 auto;
            }

                .carousel-inner img{
                    width: 640px;
                    height: 360px;
                }

        .sec4{
            background: #546C08;
        }

شكرا مقدما

أحمد رضا5 · 11 فبراير 2023

المشكلة من الكلاس row نتيجة للترتيب الخاطئ للعناصر
والحل سيكون بوضع العنصر بداخل عنصر آخر وإعطاء الكلاس sec للعنصر الأب بحيث يكون كالآتي:

          <div class="sec1 box">
            <div class="row row-cols-1 ">
				....
            </div>
          </div>

وبهذا نكون قد حللنا المشكلة
وهناك بعض التحسينات في الكود يجب عملها فمثلًا:

لست بحاجة إلى استخدام الكلاس row وبالتالي الكلاس col في الأقسام التي تحتوي على عنصر واحد.
لا تستخدم الكلاس row وcol إذا كان ترتيب العناصر أفقي فهذا هو الافتراضي ولا فائدة من ذلك.

لاحظت أن ما تحاول عمله يمكن تنفيزه بسهولة باستخدام الكلاس container وسيعطي نتيجة أفضل جرب استخدامه ليكون الكود كالاتي:

        <div class="sec2 box">
          <div class="container">
            <h1 class="mt-3">...</h1>
            <p class="mb-5 text-center">...</p>
          </div>
        </div>

انظر الروابط لمعرفة المزيد عن ال container و ال grid system:

لماذا توجد فجوة في الجانب الأيمن من الحاوية في صفحة html

السؤال

محمد لارافيل

1 جواب على هذا السؤال

Recommended Posts

أحمد رضا5

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية