twitter-bootstrap - hidden-xs bootstrap 4




bootstrap 4 المرافق استجابة مرئية/خفية XS SM إل جي لا يعمل (3)

تواجه مشكلة مع الأدوات المساعدة المستجيبة الجديدة فئات مخفية / مرئية ، عند الترحيل إلى Bootstrap 4 . أدرك أنه تم إزالة الطبقات المخفية من v3 واستبدالها بـ .hidden-*-up .hidden-*-down . استخدام .hidden-*-up.hidden-*-down الجديدة .hidden-*-up.hidden-*-down لكن العناصر لا تتغير إلى مرئية / مخفية. لا يمكن معرفة السبب.

<div class="col hidden-xs-down">
    <span class="vcard"></span>
</div>
<div class="col hidden-lg-down">
    <div class="hidden-sm-down"></div>
    <div class="hidden-xs-down"></div>
</div>

* لا يوجد شيء مخفي في هذا المثال ، بغض النظر عن حجم الشاشة (Safari ، وضع التصميم المتجاوب)


**** فئة حجم الشاشة ****

-

  1. مخبأة على الإطلاق

  2. مخفي فقط على xs .d-none .d-sm-block

  3. مخفي فقط على sm .d-sm-none .d-md-block

  4. مخفي فقط على md .d-md-none .d-lg-block

  5. مخفي فقط على lg .d-lg-none .d-xl-block

  6. مخفي فقط على xl .d-xl-none

  7. مرئي على كل .d-block

  8. مرئي فقط على xs .d-block .d-sm-none

  9. مرئي فقط على sm .d-none .d-sm-block .d-md-none

  10. مرئي فقط على md .d-none .d-md-block .d-lg-none

  11. مرئي فقط على lg .d-none .d-lg-block .d-xl-none

  12. مرئي فقط على xl .d-none .d-xl-block

راجع هذا الرابط http://getbootstrap.com/docs/4.0/utilities/display/#hiding-elements


بعض نسخة العمل

<div class="hidden-xs">Only Mobile hidden</div>
<div class="visible-xs">Only Mobile visible</div>

مع Bootstrap 4 .hidden-* تمت إزالة الفئات تمامًا (نعم ، تم استبدالها بـ hidden-*-* لكن تلك الفئات انتقلت أيضًا من الإصدار v4 alphas). بدءًا من الإصدار التجريبي v4 ، يمكنك الجمع بين فئتي .d-*-block .d-*-none و .d-*-block لتحقيق نفس النتيجة. مرئية- * تمت إزالته أيضًا ؛ بدلاً من استخدام فئات .visible-* صريحة ، اجعل العنصر مرئيًا عن طريق عدم إخفائه (مرة أخرى ، استخدم مجموعات من .d-none .d-md-block). هنا مثال العمل:

<div class="col d-none d-sm-block">
    <span class="vcard"></span>
</div>
<div class="col d-none d-xl-block">
    <div class="d-none d-md-block"></div>
    <div class="d-none d-sm-block"></div>
</div>

class="hidden-xs" يصبح class="d-none d-sm-block" (أو d-none d-sm-inline-block ) ...

مثال على الأدوات المساعدة استجابة Bootstrap 4 :

<div class="d-none d-sm-block"> hidden-xs           
  <div class="d-none d-md-block"> visible-md and up (hidden-sm and down)
    <div class="d-none d-lg-block"> visible-lg and up  (hidden-md and down)
      <div class="d-none d-xl-block"> visible-xl </div>
    </div>
  </div>
</div>

<div class="d-sm-none"> eXtra Small <576px </div>
<div class="d-none d-sm-block d-md-none d-lg-none d-xl-none"> SMall ≥576px </div>
<div class="d-none d-md-block d-lg-none d-xl-none"> MeDium ≥768px </div>
<div class="d-none d-lg-block d-xl-none"> LarGe ≥992px </div>
<div class="d-none d-xl-block"> eXtra Large ≥1200px </div>

<div class="d-xl-none"> hidden-xl (visible-lg and down)         
  <div class="d-lg-none d-xl-none"> visible-md and down (hidden-lg and up)
    <div class="d-md-none d-lg-none d-xl-none"> visible-sm and down  (or hidden-md and up)
      <div class="d-sm-none"> visible-xs </div>
    </div>
  </div>
</div>




twitter-bootstrap-4