การซ่อนองค์ประกอบในเค้าโครงที่ตอบสนองได้หรือไม่

มองผ่าน bootstrap ดูเหมือนว่าพวกเขาสนับสนุนการยุบรายการแถบเมนูสำหรับหน้าจอขนาดเล็ก มีบางอย่างที่คล้ายกันสำหรับรายการอื่น ๆ ในหน้า?

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

สิ่งนี้เป็นไปได้หรือไม่ภายในกรอบ Bootstrap ที่มีอยู่

คลาสที่มองเห็นได้ใหม่ถูกเพิ่มใน Bootstrap

อุปกรณ์ขนาดเล็กพิเศษ โทรศัพท์ (<768px)(Class names : .visible-xs-block, hidden-xs)

อุปกรณ์ขนาดเล็ก แท็บเล็ต (≥768px)(Class names : .visible-sm-block, hidden-sm)

เดส ก์ท็อปอุปกรณ์ขนาดกลาง (≥992px)(Class names : .visible-md-block, hidden-md)

เดส ก์ท็อปอุปกรณ์ขนาดใหญ่ (≥1200px)(Class names : .visible-lg-block, hidden-lg)

สำหรับข้อมูลเพิ่มเติม: http://getbootstrap.com/css/#responsive-utilities

ด้านล่างเลิกใช้ตั้งแต่วันที่ v3.2.0

อุปกรณ์ขนาดเล็กพิเศษโทรศัพท์ (<768px) (Class names : .visible-xs, hidden-xs)

อุปกรณ์ขนาดเล็กแท็บเล็ต (≥768px) (Class names : .visible-sm, hidden-sm)

เดสก์ท็อปอุปกรณ์ขนาดกลาง (≥992px) (Class names : .visible-md, hidden-md)

เดสก์ท็อปอุปกรณ์ขนาดใหญ่ (≥1200px) (Class names : .visible-lg, hidden-lg)

Bootstrap ที่เก่ากว่ามาก

.hidden-phone, .hidden-tablet ฯลฯ ไม่ได้รับการสนับสนุน / ล้าสมัย

UPDATE:

ใน Bootstrap 4 มีคลาส 2 ประเภท:

• hidden-*-upซึ่งซ่อนองค์ประกอบเมื่อวิวพอร์ตที่เบรกพอยต์ที่กำหนดหรือที่กว้างขึ้น
• hidden-*-down ซึ่งซ่อนองค์ประกอบเมื่อวิวพอร์ตอยู่ที่เบรกพอยต์ที่กำหนดหรือเล็กกว่า

นอกจากนี้xlวิวพอร์ตใหม่จะถูกเพิ่มสำหรับอุปกรณ์ที่มีความกว้างมากกว่า 1200px สำหรับข้อมูลเพิ่มเติมคลิกที่นี่

Bootstrap 4 Beta คำตอบ:

d-block d-md-noneไปซ่อนในขนาดกลางขนาดใหญ่และขนาดใหญ่พิเศษอุปกรณ์

d-none d-md-blockไปซ่อนในขนาดเล็กและขนาดเล็กพิเศษอุปกรณ์

โปรดทราบว่าคุณสามารถอินไลน์โดยแทนที่d-*-blockด้วยd-*-inline-block

คำตอบเก่า: Bootstrap 4 Alpha

• คุณสามารถใช้คลาส.hidden-*-upเพื่อซ่อนในขนาดที่กำหนดและอุปกรณ์ขนาดใหญ่

  .hidden-md-upไปซ่อนในขนาดกลางขนาดใหญ่และขนาดใหญ่พิเศษอุปกรณ์

• เช่นเดียวกับ.hidden-*-downการซ่อนในขนาดที่กำหนดและอุปกรณ์ขนาดเล็ก

  .hidden-md-downไปซ่อนในขนาดกลางขนาดเล็กและขนาดเล็กพิเศษอุปกรณ์

• visible- * ไม่ได้เป็นตัวเลือกสำหรับ bootstrap 4 อีกต่อไป

• หากต้องการแสดงเฉพาะบนอุปกรณ์ขนาดกลางคุณสามารถรวมทั้งสอง:

  hidden-sm-down และ hidden-xl-up

ขนาดที่ถูกต้องคือ:

• xs สำหรับโทรศัพท์ในโหมดแนวตั้ง (<34em)
• sm สำหรับโทรศัพท์ในโหมดแนวนอน (≥34em)
• md สำหรับแท็บเล็ต (≥48em)
• lg สำหรับเดสก์ท็อป (≥62em)
• xl สำหรับเดสก์ท็อป (≥75em)

นี่เป็นของ Bootstrap 4, alpha 5 (มกราคม 2017) รายละเอียดเพิ่มเติมได้ที่นี่: http://v4-alpha.getbootstrap.com/layout/responsive-utilities/

บน Bootstrap 4.3.x: https://getbootstrap.com/docs/4.3/utilities/display/

Bootstrap 4.x คำตอบ

hidden-* คลาสจะถูกลบออกจาก Bootstrap 4 เบต้าเป็นต้นไป

ถ้าคุณต้องการที่จะแสดงในระดับกลางและสูงกว่าใช้d-*ชั้นเรียนเช่น:

<div class="d-none d-md-block">This will show in medium and up</div>

หากคุณต้องการที่จะแสดงในขนาดเล็กและด้านล่างใช้สิ่งนี้:

<div class="d-block d-md-none"> This will show only in below medium form factors</div>

ขนาดหน้าจอและแผนภูมิระดับ

| Screen Size        | Class                          |
|--------------------|--------------------------------|
| Hidden on all      | .d-none                        |
| Hidden only on xs  | .d-none .d-sm-block            |
| Hidden only on sm  | .d-sm-none .d-md-block         |
| Hidden only on md  | .d-md-none .d-lg-block         |
| Hidden only on lg  | .d-lg-none .d-xl-block         |
| Hidden only on xl  | .d-xl-none                     |
| Visible on all     | .d-block                       |
| Visible only on xs | .d-block .d-sm-none            |
| Visible only on sm | .d-none .d-sm-block .d-md-none |
| Visible only on md | .d-none .d-md-block .d-lg-none |
| Visible only on lg | .d-none .d-lg-block .d-xl-none |
| Visible only on xl | .d-none .d-xl-block            |

แทนที่จะใช้.visible-*คลาสที่ชัดเจนคุณสามารถทำให้องค์ประกอบมองเห็นได้โดยไม่ซ่อนไว้ที่ขนาดหน้าจอนั้น คุณสามารถรวม.d-*-noneชั้นหนึ่งกับชั้นหนึ่ง.d-*-blockเพื่อแสดงองค์ประกอบเฉพาะในช่วงเวลาที่กำหนดขนาดหน้าจอ (เช่น.d-none.d-md-block.d-xl-none แสดงองค์ประกอบเฉพาะบนอุปกรณ์ขนาดกลางและขนาดใหญ่)

เอกสาร

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

.visible-phone  
.visible-tablet     
.visible-desktop    
.hidden-phone   
.hidden-tablet  
.hidden-desktop 

http://twitter.github.com/bootstrap/scaffolding.html เลื่อนไปด้านล่าง

ฉันมีการชี้แจงสองสามข้อให้เพิ่มที่นี่:

1) รายการที่แสดง (โทรศัพท์ที่มองเห็นได้, แท็บเล็ตที่มองเห็นได้ ฯลฯ ) เลิกใช้แล้วใน Bootstrap 3. ค่าใหม่คือ:

• มองเห็น xs- *
• มองเห็น sm- *
• มองเห็น md- *
• มองเห็น lg- *
• ซ่อน xs- *
• ซ่อน sm- *
• ซ่อน md- *
• ซ่อน lg- *

เครื่องหมายดอกจันแปลดังต่อไปนี้สำหรับแต่ละ (ฉันแสดงให้เห็นเท่านั้น -xs- * ด้านล่าง):

• มองเห็น XS-บล็อก
• มองเห็น XS-แบบอินไลน์
• มองเห็น XS-อินไลน์บล็อก

2) เมื่อคุณใช้คลาสเหล่านี้คุณจะไม่เพิ่มช่วงเวลาก่อนหน้า (ตามที่แสดงอย่างสับสนในส่วนของคำตอบด้านบน)

ตัวอย่างเช่น:

<div class="visible-md-block col-md-6 text-right text-muted">
   <h5>Copyright &copy; 2014 Jazimov</h5>
</div>

3) คุณสามารถใช้ visible- * และ hidden- * (ตัวอย่างเช่น visible-xs และ hidden-xs) แต่สิ่งเหล่านี้เลิกใช้แล้วใน Bootstrap 3.2.0

สำหรับรายละเอียดเพิ่มเติมและข้อมูลจำเพาะล่าสุดไปที่นี่และค้นหา "visible": http://getbootstrap.com/css/

ทั้งหมดhidden-*-up, hidden-*เรียนไม่ทำงานสำหรับฉันดังนั้นฉันเพิ่มตัวเองทำhiddenชั้นก่อนvisible-* (ซึ่งทำงานสำหรับรุ่นบูตปัจจุบัน) มันมีประโยชน์มากถ้าคุณต้องการแสดง div เพียงหน้าจอเดียวและซ่อนไว้สำหรับคนอื่น ๆ ทั้งหมด

CSS:

.hidden {display:none;}

HTML:

<div class="col-xs-12 hidden visible-xs visible-sm">
   <img src="photo.png" style="width:100%">
</div>

สำหรับ Bootstrap 4.0 เบต้า (และฉันคิดว่าสิ่งนี้จะยังคงอยู่ในขั้นสุดท้าย) มีการเปลี่ยนแปลง - โปรดระวังว่าคลาสที่ซ่อนอยู่ถูกลบ

ดูเอกสาร: https://getbootstrap.com/docs/4.0/utilities/display/

เพื่อซ่อนเนื้อหาบนมือถือและแสดงบนอุปกรณ์ขนาดใหญ่คุณต้องใช้คลาสต่อไปนี้:

d-none d-sm-block

ชุดชั้นหนึ่งไม่มีอุปกรณ์ทั้งหมดแสดงและชุดที่สองแสดงสำหรับอุปกรณ์ "sm" ขึ้นไป (คุณสามารถใช้ md, lg ฯลฯ แทน sm หากคุณต้องการแสดงบนอุปกรณ์ต่าง ๆ

ฉันขอแนะนำให้อ่านก่อนการโยกย้าย:

https://getbootstrap.com/docs/4.0/migration/#responsive-utilities

ใน boostrap 4.1 (เรียกใช้ส่วนย่อยเนื่องจากฉันคัดลอกรหัสตารางทั้งหมดจากเอกสารประกอบ Bootstrap):

.fixed_headers {
  width: 750px;
  table-layout: fixed;
  border-collapse: collapse;
}
.fixed_headers th {
  text-decoration: underline;
}
.fixed_headers th,
.fixed_headers td {
  padding: 5px;
  text-align: left;
}
.fixed_headers td:nth-child(1),
.fixed_headers th:nth-child(1) {
  min-width: 200px;
}
.fixed_headers td:nth-child(2),
.fixed_headers th:nth-child(2) {
  min-width: 200px;
}
.fixed_headers td:nth-child(3),
.fixed_headers th:nth-child(3) {
  width: 350px;
}
.fixed_headers thead {
  background-color: #333;
  color: #FDFDFD;
}
.fixed_headers thead tr {
  display: block;
  position: relative;
}
.fixed_headers tbody {
  display: block;
  overflow: auto;
  width: 100%;
  height: 300px;
}
.fixed_headers tbody tr:nth-child(even) {
  background-color: #DDD;
}
.old_ie_wrapper {
  height: 300px;
  width: 750px;
  overflow-x: hidden;
  overflow-y: auto;
}
.old_ie_wrapper tbody {
  height: auto;
}

<table class="fixed_headers">
  <thead>
    <tr>
      <th>Screen Size</th>
      <th>Class</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Hidden on all</td>
      <td><code class="highlighter-rouge">.d-none</code></td>
    </tr>
    <tr>
      <td>Hidden only on xs</td>
      <td><code class="highlighter-rouge">.d-none .d-sm-block</code></td>
    </tr>
    <tr>
      <td>Hidden only on sm</td>
      <td><code class="highlighter-rouge">.d-sm-none .d-md-block</code></td>
    </tr>
    <tr>
      <td>Hidden only on md</td>
      <td><code class="highlighter-rouge">.d-md-none .d-lg-block</code></td>
    </tr>
    <tr>
      <td>Hidden only on lg</td>
      <td><code class="highlighter-rouge">.d-lg-none .d-xl-block</code></td>
    </tr>
    <tr>
      <td>Hidden only on xl</td>
      <td><code class="highlighter-rouge">.d-xl-none</code></td>
    </tr>
    <tr>
      <td>Visible on all</td>
      <td><code class="highlighter-rouge">.d-block</code></td>
    </tr>
    <tr>
      <td>Visible only on xs</td>
      <td><code class="highlighter-rouge">.d-block .d-sm-none</code></td>
    </tr>
    <tr>
      <td>Visible only on sm</td>
      <td><code class="highlighter-rouge">.d-none .d-sm-block .d-md-none</code></td>
    </tr>
    <tr>
      <td>Visible only on md</td>
      <td><code class="highlighter-rouge">.d-none .d-md-block .d-lg-none</code></td>
    </tr>
    <tr>
      <td>Visible only on lg</td>
      <td><code class="highlighter-rouge">.d-none .d-lg-block .d-xl-none</code></td>
    </tr>
    <tr>
      <td>Visible only on xl</td>
      <td><code class="highlighter-rouge">.d-none .d-xl-block</code></td>
    </tr>
  </tbody>
</table>

https://getbootstrap.com/docs/4.1/utilities/display/#hiding-elements