มองไม่เห็น - ** และซ่อน - ** ใน Bootstrap v4

ใน Bootstrap v3 ฉันมักจะใช้ที่ซ่อนอยู่ - คลาส ** รวมกับ clearfix เพื่อควบคุมเลย์เอาต์แบบหลายคอลัมน์ที่ความกว้างหน้าจอที่แตกต่างกัน ตัวอย่างเช่น,

ฉันสามารถรวมหลายซ่อน - ** ในหนึ่ง DIV เพื่อให้คอลัมน์หลายคอลัมน์ของฉันปรากฏอย่างถูกต้องที่ความกว้างหน้าจอที่แตกต่างกัน

ตัวอย่างเช่นถ้าฉันต้องการที่จะแสดงแถวของรูปถ่ายสินค้า, 4 ต่อแถวบนขนาดหน้าจอที่ใหญ่กว่า, 3 บนหน้าจอขนาดเล็กแล้ว 2 บนหน้าจอขนาดเล็กมาก รูปถ่ายสินค้าอาจมีความสูงแตกต่างกันดังนั้นฉันต้องการ clearfix เพื่อให้แน่ใจว่าแถวแตกหักอย่างถูกต้อง

นี่คือตัวอย่างใน v3 ...

http://jsbin.com/tosebayode/edit?html,css,output

ตอนนี้ที่ v4 ทำกับคลาสเหล่านี้และแทนที่ด้วยคลาสที่มองเห็น / ซ่อน - ** - ขึ้น / ลงคลาสฉันดูเหมือนจะต้องทำสิ่งเดียวกันกับ DIV หลายตัวแทน

นี่คือตัวอย่างที่คล้ายกันใน v4 ...

http://jsbin.com/sagowihowa/edit?html,css,output

ดังนั้นฉันจึงไปจาก DIV เดี่ยวไปจนถึงต้องเพิ่ม DIV หลายตัวพร้อมคลาสขึ้น / ลงจำนวนมากเพื่อให้ได้สิ่งเดียวกัน

จาก...

<div class="clearfix visible-xs-block visible-sm-block"></div>

ถึง...

<div class="clearfix hidden-sm-up"></div>
<div class="clearfix hidden-md-up hidden-xs-down"></div>
<div class="clearfix hidden-md-down"></div>

มีวิธีที่ดีกว่าในการทำเช่นนี้ใน v4 ที่ฉันมองข้ามไปหรือไม่?

อัพเดตสำหรับ Bootstrap 4 (2018)

กระบวนการhidden-*และvisible-*คลาสไม่มีอยู่ใน Bootstrap 4 หากคุณต้องการซ่อนองค์ประกอบบนเทียร์หรือเบรกพอยต์เฉพาะใน Bootstrap 4 ให้ใช้d-* คลาสการแสดงผลตามลำดับ

โปรดจำไว้ว่าพิเศษขนาดเล็ก / มือถือ (เดิมxs) เป็นจุดพัก (โดยนัย) เริ่มต้นเว้นแต่จะถูกแทนที่ด้วยจุดพักขนาดใหญ่ ดังนั้นมัดไม่มีอยู่ใน Bootstrap 4-xs

แสดง / ซ่อนจุดพักและลง :

• hidden-xs-down (hidden-xs) = d-none d-sm-block
• hidden-sm-down (hidden-sm hidden-xs) = d-none d-md-block
• hidden-md-down (hidden-md hidden-sm hidden-xs) = d-none d-lg-block
• hidden-lg-down = d-none d-xl-block
• hidden-xl-down(n / a 3.x) = d-none(เหมือนhidden)

แสดง / ซ่อนจุดพักและขึ้น :

• hidden-xs-up= d-none(เหมือนhidden)
• hidden-sm-up = d-sm-none
• hidden-md-up = d-md-none
• hidden-lg-up = d-lg-none
• hidden-xl-up (n / a 3.x) = d-xl-none

แสดง / ซ่อนเฉพาะสำหรับเบรกพอยต์เดียว :

• hidden-xs(เท่านั้น) = d-none d-sm-block(เหมือนhidden-xs-down)
• hidden-sm (เท่านั้น) = d-block d-sm-none d-md-block
• hidden-md (เท่านั้น) = d-block d-md-none d-lg-block
• hidden-lg (เท่านั้น) = d-block d-lg-none d-xl-block
• hidden-xl (n / a 3.x) = d-block d-xl-none
• visible-xs (เท่านั้น) = d-block d-sm-none
• visible-sm (เท่านั้น) = d-none d-sm-block d-md-none
• visible-md (เท่านั้น) = d-none d-md-block d-lg-none
• visible-lg (เท่านั้น) = d-none d-lg-block d-xl-none
• visible-xl (n / a 3.x) = d-none d-xl-block

การสาธิตคลาสการแสดงผลที่ตอบสนองใน Bootstrap 4

นอกจากนี้ทราบว่าd-*-blockสามารถถูกแทนที่ด้วยd-*-inline, d-*-flex, d-*-table-cell, d-*-tableฯลฯ .. ขึ้นอยู่กับชนิดของจอแสดงผลขององค์ประกอบ อ่านเพิ่มเติมเกี่ยวกับคลาสการแสดงผล

น่าเสียดายที่คลาสทั้งหมดhidden-*-upและhidden-*-downถูกลบออกจาก Bootstrap (ตั้งแต่ Bootstrap เวอร์ชัน4 Betaในเวอร์ชัน4 Alphaและเวอร์ชัน3ยังคงมีคลาสเหล่านี้อยู่)

d-*ควรใช้คลาสใหม่แทนดังที่ได้กล่าวไว้ที่นี่: https://getbootstrap.com/docs/4.0/migration/#utilities

ฉันพบว่าวิธีการใหม่มีประโยชน์น้อยกว่าในบางสถานการณ์ แนวทางแบบเก่าคือองค์ประกอบHIDEในขณะที่แนวทางใหม่คือองค์ประกอบSHOW การแสดงองค์ประกอบนั้นไม่ใช่เรื่องง่ายสำหรับ CSS เนื่องจากคุณจำเป็นต้องทราบว่าองค์ประกอบนั้นแสดงเป็นบล็อก, อินไลน์, บล็อกอินไลน์, ตาราง ฯลฯ

คุณอาจต้องการคืนค่าสไตล์ "hidden- *" เดิมที่รู้จักจาก Bootstrap 3 ด้วย CSS นี้:

/*\
 * Restore Bootstrap 3 "hidden" utility classes.
\*/

/* Breakpoint XS */
@media (max-width: 575px)
{
    .hidden-xs-down, .hidden-sm-down, .hidden-md-down, .hidden-lg-down, .hidden-xl-down, 
    .hidden-xs-up, 
    .hidden-unless-sm, .hidden-unless-md, .hidden-unless-lg, .hidden-unless-xl
    {
        display: none !important;
    }

}

/* Breakpoint SM */
@media (min-width: 576px) and (max-width: 767px)
{
    .hidden-sm-down, .hidden-md-down, .hidden-lg-down, .hidden-xl-down, 
    .hidden-xs-up, .hidden-sm-up, 
    .hidden-unless-xs, .hidden-unless-md, .hidden-unless-lg, .hidden-unless-xl
    {
        display: none !important;
    } 
}

/* Breakpoint MD */
@media (min-width: 768px) and (max-width: 991px)
{
    .hidden-md-down, .hidden-lg-down, .hidden-xl-down, 
    .hidden-xs-up, .hidden-sm-up, .hidden-md-up, 
    .hidden-unless-xs, .hidden-unless-sm, .hidden-unless-lg, .hidden-unless-xl
    {
        display: none !important;
    } 
}

/* Breakpoint LG */
@media (min-width: 992px) and (max-width: 1199px)
{
    .hidden-lg-down, .hidden-xl-down, 
    .hidden-xs-up, .hidden-sm-up, .hidden-md-up, .hidden-lg-up, 
    .hidden-unless-xs, .hidden-unless-sm, .hidden-unless-md, .hidden-unless-xl
    {
        display: none !important;
    } 
}

/* Breakpoint XL */
@media (min-width: 1200px)
{
    .hidden-xl-down, 
    .hidden-xs-up, .hidden-sm-up, .hidden-md-up, .hidden-lg-up, .hidden-xl-up, 
    .hidden-unless-xs, .hidden-unless-sm, .hidden-unless-md, .hidden-unless-lg
    {
        display: none !important;
    } 
}

คลาสhidden-unless-*ไม่รวมอยู่ใน Bootstrap 3 แต่มีประโยชน์เช่นกันและควรอธิบายด้วยตนเอง

Bootstrap v4.1 ใช้ชื่อคลาสใหม่เพื่อซ่อนคอลัมน์ในระบบกริด

สำหรับคอลัมน์ที่หลบซ่อนตัวขึ้นอยู่กับความกว้างหน้าจอการใช้งานd-noneระดับหรือใด ๆ ของd-{sm,md,lg,xl}-noneชั้นเรียน หากต้องการแสดงคอลัมน์ในหน้าจอบางขนาดรวมชั้นเรียนดังกล่าวข้างต้นด้วยd-blockหรือd-{sm,md,lg,xl}-blockชั้นเรียน

ตัวอย่างคือ:

<div class="d-lg-none">hide on screens wider than lg</div>
<div class="d-none d-lg-block">hide on screens smaller than lg</div>

อื่น ๆ เหล่านี้ที่นี่

ฉันไม่คาดหวังว่า div หลายอันเป็นทางออกที่ดี

ฉันคิดว่าคุณสามารถแทนที่.visible-sm-blockด้วย.hidden-xs-downและ.hidden-md-up(หรือ.hidden-sm-downและ.hidden-lg-upเพื่อดำเนินการกับคำสั่งสื่อเดียวกัน)

hidden-sm-up รวบรวมเป็น:

.visible-sm-block {
  display: none !important;
}
@media (min-width: 768px) and (max-width: 991px) {
  .visible-sm-block {
    display: block !important;
  }
}

.hidden-sm-downและ.hidden-lg-upรวบรวมเป็น:

@media (max-width: 768px) {
  .hidden-xs-down {
    display: none !important;
  }
}
@media (min-width: 991px) {
  .hidden-lg-up {
    display: none !important;
  }
}

ทั้งสองสถานการณ์ควรทำแบบเดียวกัน

คุณจะกลายเป็นสถานการณ์ที่แตกต่างกันเมื่อคุณพยายามที่จะเปลี่ยนและ.visible-sm-block .visible-lg-blockBootstrap v4 docs บอกคุณ:

คลาสเหล่านี้ไม่ได้พยายามรองรับกรณีทั่วไปที่น้อยกว่าซึ่งการมองเห็นขององค์ประกอบไม่สามารถแสดงเป็นช่วงจุดพักวิวขนาดเดียวที่ต่อเนื่องกัน คุณจะต้องใช้ CSS ที่กำหนดเองแทนในกรณีเช่นนี้

.visible-sm-and-lg {
  display: none !important;
}
@media (min-width: 768px) and (max-width: 991px) {
  .visible-sm-and-lg {
    display: block !important;
  }
}
@media (min-width: 1200px) {
  .visible-sm-and-lg {
    display: block !important;
  }
}

ผู้ใช้ Klaro แนะนำให้คืนค่าคลาสการมองเห็นแบบเก่าซึ่งเป็นความคิดที่ดี น่าเสียดายที่โซลูชันของพวกเขาไม่ทำงานในโครงการของฉัน

ฉันคิดว่ามันเป็นความคิดที่ดีกว่าในการกู้คืนมิกซ์อินเก่าของ bootstrap เพราะครอบคลุมจุดพักทั้งหมดที่ผู้ใช้สามารถกำหนดได้เอง

นี่คือรหัส:

// Restore Bootstrap 3 "hidden" utility classes.
@each $bp in map-keys($grid-breakpoints) {
  .hidden-#{$bp}-up {
    @include media-breakpoint-up($bp) {
      display: none !important;
    }
  }
  .hidden-#{$bp}-down {
    @include media-breakpoint-down($bp) {
      display: none !important;
    }
  }
  .hidden-#{$bp}-only{
    @include media-breakpoint-only($bp){
      display:none !important;
    }
  }
}

ในกรณีของฉันฉันได้แทรกส่วนนี้ใน_custom.scssไฟล์ซึ่งรวมอยู่ในจุดนี้ในbootstrap.scss:

/*!
 * Bootstrap v4.0.0-beta (https://getbootstrap.com)
 * Copyright 2011-2017 The Bootstrap Authors
 * Copyright 2011-2017 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */

@import "functions";
@import "variables";
@import "mixins";
@import "custom"; // <-- my custom file for overwriting default vars and adding the snippet from above
@import "print";
@import "reboot";
[..]

http://v4-alpha.getbootstrap.com/layout/responsive-utilities/

ตอนนี้คุณต้องกำหนดขนาดของสิ่งที่ถูกซ่อนไว้

.hidden-xs-down

จะซ่อนอะไรจาก xs และเล็กกว่าเพียง xs

.hidden-xs-up

จะซ่อนทุกอย่าง

สำหรับ bootstrap 4 นี่คือภาพเมทริกซ์ที่อธิบายคลาสที่ใช้ในการแสดง / ซ่อนองค์ประกอบขึ้นอยู่กับขนาดหน้าจอ:

ที่มา: Meduim: Bootstrap 4 Hidden & Visible

Bootstrap 4 เพื่อซ่อนเนื้อหาทั้งหมดใช้คลาสนี้'.d-none'มันจะซ่อนทุกอย่างโดยไม่คำนึงถึงจุดพักเหมือนกันกับคลาส bootstrap รุ่นก่อนหน้า'.hidden'

น่าเสียดายที่คลาส bootstrap 4 ใหม่เหล่านี้ไม่ทำงานเหมือนอันเก่าบน div ที่ใช้collapseเนื่องจากพวกเขาตั้ง div ที่มองเห็นblockซึ่งเริ่มปรากฏให้เห็นมากกว่าที่ซ่อนอยู่และถ้าคุณเพิ่ม div พิเศษรอบ ๆcollapseฟังก์ชั่นไม่ทำงานอีกต่อไป

i like the bootstrap3 style as the device width of bootstrap4
so i modify the css as below
<pre>
.visible-xs, .visible-sm, .visible-md, .visible-lg { display:none !important; }
.visible-xs-block, .visible-xs-inline, .visible-xs-inline-block,
.visible-sm-block, .visible-sm-inline, .visible-sm-inline-block,
.visible-md-block, .visible-md-inline, .visible-md-inline-block,
.visible-lg-block, .visible-lg-inline, .visible-lg-inline-block { display:none !important; }
@media (max-width:575px) {
table.visible-xs                { display:table !important; }
tr.visible-xs                   { display:table-row !important; }
th.visible-xs, td.visible-xs    { display:table-cell !important; }

.visible-xs                 { display:block !important; }
.visible-xs-block { display:block !important; }
.visible-xs-inline { display:inline !important; }
.visible-xs-inline-block { display:inline-block !important; }
}

@media (min-width:576px) and (max-width:767px) {
table.visible-sm { display:table !important; }
tr.visible-sm { display:table-row !important; }
th.visible-sm,
td.visible-sm { display:table-cell !important; }

.visible-sm { display:block !important; }
.visible-sm-block { display:block !important; }
.visible-sm-inline { display:inline !important; }
.visible-sm-inline-block { display:inline-block !important; }
}

@media (min-width:768px) and (max-width:991px) {
table.visible-md { display:table !important; }
tr.visible-md { display:table-row !important; }
th.visible-md,
td.visible-md { display:table-cell !important; }

.visible-md { display:block !important; }
.visible-md-block { display:block !important; }
.visible-md-inline { display:inline !important; }
.visible-md-inline-block { display:inline-block !important; }
}

@media (min-width:992px) and (max-width:1199px) {
table.visible-lg { display:table !important; }
tr.visible-lg { display:table-row !important; }
th.visible-lg,
td.visible-lg { display:table-cell !important; }

.visible-lg { display:block !important; }
.visible-lg-block { display:block !important; }
.visible-lg-inline { display:inline !important; }
.visible-lg-inline-block { display:inline-block !important; }
}

@media (min-width:1200px) {
table.visible-xl { display:table !important; }
tr.visible-xl { display:table-row !important; }
th.visible-xl,
td.visible-xl { display:table-cell !important; }

.visible-xl { display:block !important; }
.visible-xl-block { display:block !important; }
.visible-xl-inline { display:inline !important; }
.visible-xl-inline-block { display:inline-block !important; }
}

@media (max-width:575px)                        { .hidden-xs{display:none !important;} }
@media (min-width:576px) and (max-width:767px)  { .hidden-sm{display:none !important;} }
@media (min-width:768px) and (max-width:991px)  { .hidden-md{display:none !important;} }
@media (min-width:992px) and (max-width:1199px) { .hidden-lg{display:none !important;} }
@media (min-width:1200px)                       { .hidden-xl{display:none !important;} }
</pre>