لماذا لا يسمح لي بوضع margin اضافي من اعلى

Amro Atef Awad · 15 يونيو 2023

انا اعمل بbootstrap في هذا المشروع

ولاحظت ان الcard في المشروع التالي لا يريد تطبيق اي margin-top اضافي بcss او mt ب bootstrap

وعند اضافة المزيد من الcards بواسطة الgrid systemتظهر تحت بعضها البعض ولا اجد سببا لذلك

اريد تفسيرا موضحا لذلك مع بعض النصائح لانني اعاني كثيرا واجد مشاكل لا تظهر مع المدرب عند التطبيق

index.html

محمد Fahmy · 15 يونيو 2023

مرحباً عمرو،
نرجو منك طرح الأسئلة المتعلقه بالدورة في قسم الأسئلة المخصص لكل درس، حيث يمكن للمدرب مساعدتك بشكل أفضل.

كما يُفضل إرفاق ملفات المشروع كاملة بشكل مضغوط لتُسهل على المدرب مساعدتك.

شكراً لك.

عبدالباسط ابراهيم · 15 يونيو 2023

بالعكس يأخذ العنصر card أو ال row ال margin التي قمت بتحديدها وهي m-5 من بوتستراب ولكنها ليست كافية لتظهر حيث أن العنصر card يبداً من أول الصفحة وذلك لأن ال navbar يأخذ الخاصية position والصورة التالية توضح كل شئ

والحل هو حذف الصنف m-5 حتى يتم تطبيق ال margin-top: 180px;

لصبح الكود كالتالي

<div class="row" style="margin-top: 180px; ">

بدلاً من

<div class="row m-5" style="margin-top: 180px; ">

Mustafa Suleiman · 15 يونيو 2023

بخصوص مشكلة الـ margin فقد أشار إليك عبد الباسط بالحل، وبخصوص مشكلة grid system فهو ليس Grid بالضبط بل يتم إنشاء شبكة بواسطة Flex، وستجد شرح لذلك في المستند الرسمي لـ Grid system.

وهو يعمل بشكل سليم، ولكن يبدوا أنك لم تستخدم الإصدار 4.5.3 من Bootstrap وهو الذي يستخدمه المدرب.

ومن الأسهل لك استخدام CDN بدلاً من تحميل ملفات المكتبات، وقد قمت باستيراد كل الملفات عن طريق CDN.

وقمت بحذف الـ height للصور وأبقيت الـ width فقط حيث يتم حديد الطول تلقائيًا ليتناسب مع العرض لتعرض الصورة بشكل متناسب وبأبعاد سليمة وغير ضبابية.

وأيضًا وضعت row-gap بقيمة 10px على العنصر الأب row، وذلك من أجل وضع فواصل بين جميع الـ cards.

وإليك الكود بعد التعديل وتستطيع استخدامه وهو يعمل لكن قم بتعديل مسار واسم الصور فقط:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Youtuby</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.5.3/css/bootstrap.min.css"
      integrity="sha512-oc9+XSs1H243/FRN9Rw62Fn8EtxjEYWHXRvjS43YtueEewbS6ObfXcJNyohjHqVKFPoXXUxwc+q1K7Dee6vv9g=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
    <style></style>
  </head>
  <body class="m-5 rtl">
    <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top rtl">
      <a class="navbar-brand" href="#index.html">يوتيوبي</a>
      <button
        class="navbar-toggler"
        type="button"
        data-toggle="collapse"
        data-target="#navbarSupportedContent"
      >
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mx-lg-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#index.html">الفيديوهات المقترحة </a>
          </li>
          <li class="nav-item">
            <a class="nav-link ml-lg-3" href="#">المرفوعة حديثا</a>
          </li>

          <li class="nav-item">
            <a class="nav-link px-lg-0" href="#" tabindex="-1">الفيديوهات الرائجة</a>
          </li>
          <li class="nav-item">
            <a
              class="nav-link btn btn-primary text-white"
              href="#"
              data-toggle="modal"
              data-target="#loginmodal"
              >تسجيل الدخول</a
            >
          </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
          <input class="form-control mr-sm-2" type="search" placeholder="ابحث" />
          <button class="btn btn-outline-primary my-2 my-sm-0" type="submit">ابحث</button>
        </form>
      </div>
    </nav>

    <div class="modal fade rtl" id="loginmodal">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">تسجيل الدخول</h5>
            <button type="button" class="close" data-dismiss="modal">
              <span>&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <form>
              <div class="form-group">
                <label for="email" class="col-form-label">البريد الالكتروني:</label>
                <input type="email" class="form-control" id="email" />
              </div>
              <div class="form-group">
                <label for="password" class="col-form-label">كلمة السر:</label>
                <input type="password" class="form-control" id="password" />
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <a href="#">نسيت كلمة السر</a>
            <a href="#" class="mx-auto">انشاء حساب</a>
            <button type="button" class="btn btn-secondary" data-dismiss="modal">دخول</button>
          </div>
        </div>
      </div>
    </div>

    <div class="row" style="margin-top: 180px; row-gap: 10px">
      <div class="col-lg-4">
        <div class="card">
          <img src="img.png" style="width: 100px" class="card-img-top" />
          <div class="card-body">
            <h5>this photo is nice</h5>
          </div>
        </div>
      </div>
      <div class="col-lg-4">
        <div class="card">
          <img src="img.png" style="width: 100px" class="card-img-top" />
          <div class="card-body">
            <h5>this photo is nice</h5>
          </div>
        </div>
      </div>
      <div class="col-lg-4">
        <div class="card">
          <img src="img.png" style="width: 100px" class="card-img-top" />
          <div class="card-body">
            <h5>this photo is nice</h5>
          </div>
        </div>
      </div>
      <div class="col-lg-4">
        <div class="card">
          <img src="img.png" style="width: 100px" class="card-img-top" />
          <div class="card-body">
            <h5>this photo is nice</h5>
          </div>
        </div>
      </div>
      <div class="col-lg-4">
        <div class="card">
          <img src="img.png" style="width: 100px" class="card-img-top" />
          <div class="card-body">
            <h5>this photo is nice</h5>
          </div>
        </div>
      </div>
    </div>

    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"
      integrity="sha512-3gJwYpMe3QewGELv8k/BX9vcqhryRdzRMxVfq6ngyWXwo03GFEzjsUm8Q7RZcHPHksttq7/GFoxjCVUjkjvPdw=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    ></script>

    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.5.3/js/bootstrap.bundle.js"
      integrity="sha512-CIx/U2r3mgLo/8//HfU4Fb0U4ldfggM0wrTHnRoawoqPFmbkUs6exrdChiPYqVllmtz6Y10rVbyDOAq7d7nZ1w=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    ></script>
  </body>
</html>