اذهب إلى المحتوى
  • 0

مشكلة تقارب المحتوى في بوتستراب 5

Ali Mezher

السؤال

Recommended Posts

  • 0
بتاريخ 4 ساعات قال Ali Mezher:

كلا لم يعمل

أرى أنك قمت بتحديد عرض للمحدد card  

style="width: 26rem"

وبالتالي يمكنك حذف هذه الخاصية كي يتم وضع العرض الافتراضي للأعمدة ، أيضا يمكنك توسيط الصناديق بنصف الصفحة عن طريق إضافة المحدد 

justify-content-center

إلى السطر التالي 

<div class="row justify-content-center">

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

هذا بسبب كيفية وضع الأعمدة بداخل الصفحة , بحيث أعتقد أنك قم باستخدام المحدد 

col-md-4

لكل عمود بحيث يظهر في كل صف فقط 3 أعمدة و بالتالي كل عمود يكون كبير نسبياً مقارنة بحجم الصفحة. حاول تقليل حجم العمود وجعله مثلاً 

col-md-3

و من ثم حدث الصفحة و لاحظ هل تغير الحجم لكل عمود أو لا .

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ 30 دقائق مضت قال بلال زيادة:

هذا بسبب كيفية وضع الأعمدة بداخل الصفحة , بحيث أعتقد أنك قم باستخدام المحدد 


col-md-4

لكل عمود بحيث يظهر في كل صف فقط 3 أعمدة و بالتالي كل عمود يكون كبير نسبياً مقارنة بحجم الصفحة. حاول تقليل حجم العمود وجعله مثلاً 


col-md-3

و من ثم حدث الصفحة و لاحظ هل تغير الحجم لكل عمود أو لا .

 

لم يعمل

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
<div class="container">
      <div class="row">
        <div class="col-4">
          <div class="card bg-dark text-center text-white mt-5" style="width: 26rem">
            <div class="card-body">
              <i class="fa-solid fa-laptop fa-2x pb-3"></i>
              <h5 class="card-title">Virtual</h5>
              <p class="card-text">
                Lorem , ipsum dolor sit amet consectetur adipisicing elit . lure, quas quidem possimus dolorum esse eligendi ?
              </p>
              <a href="#" class="btn btn-primary">Read More</a>
            </div>
          </div>
        </div>
        <div class="col-4">
          <div
            class="card bg-secondary text-center text-white mt-5" style="width: 26rem">
            <div class="card-body">
              <i class="fa-solid fa-circle-user fa-2x pb-3"></i>
              <h5 class="card-title">Hybrid</h5>
              <p class="card-text">Lorem , ipsum dolor sit amet consectetur adipisicing elit . lure, quas quidem possimus dolorum esse eligendi ?
              </p>
              <a href="#" class="btn btn-dark">Read More</a>
            </div>
          </div>
        </div>
        <div class="col-4">
          <div class="card bg-dark text-center text-white mt-5 mr-sm-2" style="width: 26rem">
            <div class="card-body">
              <i class="fa-solid fa-user-group fa-2x pb-3"></i>
              <h5 class="card-title">In Person</h5>
              <p class="card-text">Lorem , ipsum dolor sit amet consectetur adipisicing elit . lure, quas quidem possimus dolorum esse eligendi ?
              </p>
              <a href="#" class="btn btn-primary">Read More</a>
            </div>
          </div>
        </div>
      </div>
    </div>

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ 27 دقائق مضت قال Ali Mezher:

<div class="container">
      <div class="row">
        <div class="col-4">
          <div class="card bg-dark text-center text-white mt-5" style="width: 26rem">
            <div class="card-body">
              <i class="fa-solid fa-laptop fa-2x pb-3"></i>
              <h5 class="card-title">Virtual</h5>
              <p class="card-text">
                Lorem , ipsum dolor sit amet consectetur adipisicing elit . lure, quas quidem possimus dolorum esse eligendi ?
              </p>
              <a href="#" class="btn btn-primary">Read More</a>
            </div>
          </div>
        </div>
        <div class="col-4">
          <div
            class="card bg-secondary text-center text-white mt-5" style="width: 26rem">
            <div class="card-body">
              <i class="fa-solid fa-circle-user fa-2x pb-3"></i>
              <h5 class="card-title">Hybrid</h5>
              <p class="card-text">Lorem , ipsum dolor sit amet consectetur adipisicing elit . lure, quas quidem possimus dolorum esse eligendi ?
              </p>
              <a href="#" class="btn btn-dark">Read More</a>
            </div>
          </div>
        </div>
        <div class="col-4">
          <div class="card bg-dark text-center text-white mt-5 mr-sm-2" style="width: 26rem">
            <div class="card-body">
              <i class="fa-solid fa-user-group fa-2x pb-3"></i>
              <h5 class="card-title">In Person</h5>
              <p class="card-text">Lorem , ipsum dolor sit amet consectetur adipisicing elit . lure, quas quidem possimus dolorum esse eligendi ?
              </p>
              <a href="#" class="btn btn-primary">Read More</a>
            </div>
          </div>
        </div>
      </div>
    </div>

 

أظن أنه يجب تغيير col-md-3 كالتالي و أخباري بالنتيجة ، 

<div class="container">
      <div class="row">
        <div class="col-md-3">
          <div class="card bg-dark text-center text-white mt-5" style="width: 26rem">
            <div class="card-body">
              <i class="fa-solid fa-laptop fa-2x pb-3"></i>
              <h5 class="card-title">Virtual</h5>
              <p class="card-text">
                Lorem , ipsum dolor sit amet consectetur adipisicing elit . lure, quas quidem possimus dolorum esse eligendi ?
              </p>
              <a href="#" class="btn btn-primary">Read More</a>
            </div>
          </div>
        </div>
        <div class="col-md-3">
          <div
            class="card bg-secondary text-center text-white mt-5" style="width: 26rem">
            <div class="card-body">
              <i class="fa-solid fa-circle-user fa-2x pb-3"></i>
              <h5 class="card-title">Hybrid</h5>
              <p class="card-text">Lorem , ipsum dolor sit amet consectetur adipisicing elit . lure, quas quidem possimus dolorum esse eligendi ?
              </p>
              <a href="#" class="btn btn-dark">Read More</a>
            </div>
          </div>
        </div>
        <div class="col-md-3">
          <div class="card bg-dark text-center text-white mt-5 mr-sm-2" style="width: 26rem">
            <div class="card-body">
              <i class="fa-solid fa-user-group fa-2x pb-3"></i>
              <h5 class="card-title">In Person</h5>
              <p class="card-text">Lorem , ipsum dolor sit amet consectetur adipisicing elit . lure, quas quidem possimus dolorum esse eligendi ?
              </p>
              <a href="#" class="btn btn-primary">Read More</a>
            </div>
          </div>
        </div>
      </div>
    </div>

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ 15 دقائق مضت قال بلال زيادة:

أظن أنه يجب تغيير col-md-3 كالتالي و أخباري بالنتيجة ، 


<div class="container">
      <div class="row">
        <div class="col-md-3">
          <div class="card bg-dark text-center text-white mt-5" style="width: 26rem">
            <div class="card-body">
              <i class="fa-solid fa-laptop fa-2x pb-3"></i>
              <h5 class="card-title">Virtual</h5>
              <p class="card-text">
                Lorem , ipsum dolor sit amet consectetur adipisicing elit . lure, quas quidem possimus dolorum esse eligendi ?
              </p>
              <a href="#" class="btn btn-primary">Read More</a>
            </div>
          </div>
        </div>
        <div class="col-md-3">
          <div
            class="card bg-secondary text-center text-white mt-5" style="width: 26rem">
            <div class="card-body">
              <i class="fa-solid fa-circle-user fa-2x pb-3"></i>
              <h5 class="card-title">Hybrid</h5>
              <p class="card-text">Lorem , ipsum dolor sit amet consectetur adipisicing elit . lure, quas quidem possimus dolorum esse eligendi ?
              </p>
              <a href="#" class="btn btn-dark">Read More</a>
            </div>
          </div>
        </div>
        <div class="col-md-3">
          <div class="card bg-dark text-center text-white mt-5 mr-sm-2" style="width: 26rem">
            <div class="card-body">
              <i class="fa-solid fa-user-group fa-2x pb-3"></i>
              <h5 class="card-title">In Person</h5>
              <p class="card-text">Lorem , ipsum dolor sit amet consectetur adipisicing elit . lure, quas quidem possimus dolorum esse eligendi ?
              </p>
              <a href="#" class="btn btn-primary">Read More</a>
            </div>
          </div>
        </div>
      </div>
    </div>

 

كلا لم يعمل

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ 2 دقائق مضت قال بلال زيادة:

أرى أنك قمت بتحديد عرض للمحدد card  


style="width: 26rem"

وبالتالي يمكنك حذف هذه الخاصية كي يتم وضع العرض الافتراضي للأعمدة ، أيضا يمكنك توسيط الصناديق بنصف الصفحة عن طريق إضافة المحدد 


justify-content-center

إلى السطر التالي 


<div class="row justify-content-center">

 

هذا يعمل بشكل ممتاز شكرا جزيلا

رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...