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

كيف اقوم بضبط التباعد في bootstrap ؟

ابو تركي_2020

السؤال

السلام عليكم ورحمة الله اخواني

كيف اقوم بضبط التباعد ما بين الـ div الخاص بمحتوى الصفحة مع القائمة الجانبية sidebar

حيث أنه في ال bootstrap هناك div يأخذ الكلاس container ولكن هذا يجعل المحتوى بعيد نوعا ما عند يمين ويسار الصفحة 

يعني لو وضعت الsidebar في اليمين سيكون محتوى ال div الخاص بالمحتوى بعيد عن السايد بار 

 

ولو استخدمت في ال div كلاس container-fluid سيأخذ محتوى الصفحة كاملا

 

فكيف لي أن أوفق بين تقريب التباعد بين السايد بار و الديف الخاص بمحتوى الصفحة باستخدام ال bootstrap  ؟

 

2020-09-09_23-29-05.png

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

Recommended Posts

  • 0

مرحباً أبو تركي :
البوتستراب يستخدم fluid ليستفيد من الصفحة كاملة أما بداخل ال fluid يستخدم ال grid system أو نظام الشبكة ( وهو نظام يقو بتقسيم ال container ل 12 عمود ) لتوزيع العناصر بالمساحات التي يرغبون بها فمثلاً ال sidebar يأخذ مساحة 3 أعمدة من ال fluid وباقي الصفحة تأخذ 9 أعمدة  من ال fluid ... أرجو أن تدرس ال grid-system من هذا المثال وأعتقد هذا المثال مقارب لما تبحث عنه  

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

  • 0
بتاريخ 15 ساعات قال Nezar Madi:

مرحبًا..

الرجاء إرفاق مثال لعمل قمت به و توضيح المشكلة التي تواجهك للوصول إلى النتيجة المرغوبة , حتى يتسنى لنا مساعدتك في إنجازه.

هذا المطلوب 

هل يمكن وضع تصور عام لأطبق لدي في الكود؟

2020-09-10_16-51-02.png

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

  • 0
اقتباس

هذا المطلوب 

هل يمكن وضع تصور عام لأطبق لدي في الكود؟

مرحبَا أبوتركي..

هذا تنسيق (layout) بسيط جدًا قمت بتنفيذه الأن لعمل صفحة بنفس التنسيق الذي ترغبه :

<body>
    <div class="row">
        <!-- عمود المحتوى -->
        <div class="col-9">
            <!-- الناف بار -->
            <div class="row">
            </div>
            <!-- المحتوى الرئيسي -->
            <div class="row">
            </div>
            <!-- الفوتر -->
            <div class="row">
            </div>
        </div>
        <!-- عمود القائمة الجانبية -->
        <div class="col-3">
        </div>
    </div>
</body>

طبعًا أنت بحاجة إلى إضافة محتوى حتى يظهر لك كيفية إصطفاف العناصر بعد ذلك بإمكانك إضافة التنسيقات المطلوبة للوصول إلى النتيجة التي ترغبها.

الصفحة تتكون من صف رئيسي مقسم إلى عمودين العمود الأول على يسار الشاشة سيأخد مساحة 9 أعمدة من أصل 12 عمود أما العمود التاني سيظهر على يمين الشاشة و سيأخد مساحة 3 أعمدة ( المتبقية ).

داخل العمود الأيسر قمنا بتقسيمه إلى 3 صفوف : الصف الأول للناف بار , الصف التاني للمحتوى , الصف الثالث للفوتر.

أما العمود الأيمن بإمكانك وضع داخلة محتويات السايد بار.

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

  • 0
بتاريخ 7 ساعات قال Nezar Madi:

مرحبَا أبوتركي..

هذا تنسيق (layout) بسيط جدًا قمت بتنفيذه الأن لعمل صفحة بنفس التنسيق الذي ترغبه :


<body>
    <div class="row">
        <!-- عمود المحتوى -->
        <div class="col-9">
            <!-- الناف بار -->
            <div class="row">
            </div>
            <!-- المحتوى الرئيسي -->
            <div class="row">
            </div>
            <!-- الفوتر -->
            <div class="row">
            </div>
        </div>
        <!-- عمود القائمة الجانبية -->
        <div class="col-3">
        </div>
    </div>
</body>

طبعًا أنت بحاجة إلى إضافة محتوى حتى يظهر لك كيفية إصطفاف العناصر بعد ذلك بإمكانك إضافة التنسيقات المطلوبة للوصول إلى النتيجة التي ترغبها.

الصفحة تتكون من صف رئيسي مقسم إلى عمودين العمود الأول على يسار الشاشة سيأخد مساحة 9 أعمدة من أصل 12 عمود أما العمود التاني سيظهر على يمين الشاشة و سيأخد مساحة 3 أعمدة ( المتبقية ).

داخل العمود الأيسر قمنا بتقسيمه إلى 3 صفوف : الصف الأول للناف بار , الصف التاني للمحتوى , الصف الثالث للفوتر.

أما العمود الأيمن بإمكانك وضع داخلة محتويات السايد بار.

تحديث :

اختفاء الديف الذي في الاعلى يكون هكذا عندما اعطي للناف بار fixed-top واذا أزلتها يعود الديف لوضعه الطبيعي 

2020-09-11_0-30-06.png

تم التعديل في بواسطة ابو تركي_2020
اضافة
رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

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

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

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   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.

  • إعلانات

  • تابعنا على



×
×
  • أضف...