Twitter-bootstrap 3 شريط جانبي مُلصق يتداخل مع المحتوى عند تغيير حجم النافذة وكذلك التذييل

Question

أواجه مشكلات مع الشريط الجانبي المتداخل عندما أستخدم الملحق لـ bootstrap 3 وأقوم بتغيير حجم النافذة.هل هناك طريقة لإضافة بعض فئات CSS بحيث يتم تثبيت القائمة في الأعلى بدلاً من تداخل العمود؟

كما يتداخل العمود مع التذييل.أي مساعدة سيكون موضع تقدير كبير.ويبدو أن الكثير من الناس لديهم نفس هذه المشكلة.

هنا هو HTML:

<div class="container">
<div class="row">
    <div class="col-md-4 column">
                <ul id="sidebar" class="nav nav-stacked" data-spy="affix" data-offset-top="130">
              <li><a href="#software"><b>Software</b></a></li>
                    <ul>
                       <li><a href="#features">Features</a></li>
                       <li><a href="#benefits">Benefits</a></li>
                       <li><a href="#costs">Costs</a></li>
                    </ul>

           </ul>

    </div>
    <div class="col-md-8 column">
            <p>blah, blah, blah</p>
            <hr>
          <a class="anchor3" id="top" name="software"></a>
            <h2 style="font-weight:bold;">Software</h2>
 <p>
 blah, blah, blah...</p><br><br>

    </div>
   </div>
  </div>

هنا هو CSS:

#sidebar.affix-top {
position: static;
}

#sidebar.affix {
position: fixed;
top: 100px;
}

Answer 1

تجريبي: http://bootply.com/104634

يجب عليك تطبيق فقط affix عندما يكون عرض الشاشة أكبر من 992 بكسل (نقطة التوقف التي يتم عندها Bootstrap col-md-* يبدأ التراص عموديًا).

.affix-top,.affix{
    position: static;
}

@media (min-width: 992px) {

  #sidebar.affix-top {
  position: static;
  }

  #sidebar.affix {
  position: fixed;
  top: 100px;
  }
}

أيضًا، إذا كنت ترغب في استخدام affix على عروض أصغر يمكنك تغيير الأعمدة الخاصة بك إلى col-sm-* أو col-xs-*.

Answer 2

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

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

للقيام بذلك كل ما عليك فعله هو إعطاء العمود الخاص بك وقم بمعرف معرف.(أو إلى حد ما للإشارة عن العناصر مع جافا سكريبت)

ذهبت للحصول على حل جافا سكريبت.

giveacodicetagpre.

لقد قمت بتضمين التعليمات البرمجية لإزالة الملصقات عند نقطة توقف محددة.هذا محدد في طلبي، لكنك على الأرجح ترغب في فعل شيء من هذا القبيل أيضا لإيقاف الملصق على الأجهزة الصغيرة.