bootstrap 4 ยูทิลิตี้ตอบสนองที่มองเห็น / ซ่อน xs sm lg ไม่ทำงาน

มีปัญหาเกี่ยวกับระบบสาธารณูปโภคที่ตอบสนองต่อใหม่ซ่อน / เรียนมองเห็นได้เมื่อการโยกย้ายไปยังBootstrap 4 ฉันทราบว่า. hidden- คลาสถูกลบออกจาก v3 แล้วและแทนที่ด้วย.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, โหมดออกแบบตอบสนอง)

ด้วย Bootstrap 4 .hidden-* คลาสถูกลบออกอย่างสมบูรณ์ (ใช่พวกมันถูกแทนที่ด้วยhidden-*-*แต่คลาสเหล่านั้นก็หายไปจาก v4 alphas ด้วย)

เริ่มต้นด้วย v4-beta คุณสามารถรวม.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 ) ...

<span class="d-none d-sm-inline">hidden-xs</span>

<span class="d-none d-sm-inline-block">hidden-xs</span>

ตัวอย่างของยูทิลิตี้ที่ตอบสนอง 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>

• codepen.io/_yatko/pen/ZJXQxy

เอกสารประกอบ

ระดับขนาดหน้าจอ

-

1. ซ่อนอยู่ใน . d-none

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

ลิงค์ 4.5: https://getbootstrap.com/docs/4.5/utilities/display/#hiding-elements

Bootstrap 4 (^ beta) ได้เปลี่ยนคลาสสำหรับการซ่อน / แสดงองค์ประกอบที่ตอบสนอง ดูลิงค์นี้สำหรับคลาสที่ถูกต้องที่จะใช้: 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>