لماذا لا يسمح لي بوضع 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>

وإذا أردت استيراد أي مكتبات من خلال CDN تستطيع استخدام أحد الموقع التالية:

cdnjs.com

وبالنسبة للموقع السابق قم بالبحث عن المكتبة التي تريدها ثم اختر رقم الإصدار الخاص بها، ثم اضغط على زر </> لنسخ الرابط كما هو موضح في الكود السابق.

ويوجد أيضًا موقع آخر وهو:

jsdelivr.com

وابحث عن اسم المكتبة ثم اختر رقم الإصدار ثم انسخ الرابط.

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

السؤال

Amro Atef Awad

رابط هذا التعليق

شارك على الشبكات الإجتماعية

3 أجوبة على هذا السؤال

Recommended Posts

محمد Fahmy

رابط هذا التعليق

شارك على الشبكات الإجتماعية

عبدالباسط ابراهيم

رابط هذا التعليق

شارك على الشبكات الإجتماعية

Mustafa Suleiman

رابط هذا التعليق

شارك على الشبكات الإجتماعية

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية