부트 스트랩 4 표시 줄 숨기기

Question

화면 크기에 따라 열을 숨기거나 표시 할 수 있어야합니다.

예 :

• 화면이 작은 < 576px, 나는 2 열 화면이 매체 ≥768px이 때, 4 열
• 때 화면을 표시 할
• 표시 할 추가입니다 eXtra Large ≥1200이면 6 열을 표시하고 싶습니다.

수백 개의 행이 있으므로 크기를 기준으로 표시하거나 숨길 수있는 3 개의 표가 필요하지 않습니다.

JS 바이올린은 : 당신이 d-table-cell 클래스를 제거 할 때 https://jsfiddle.net/tkcynbjk/

<div class="row"> 
    <div class="col-sm-12"> 
     <table class="table table-striped"> 
      <thead> 
      <tr> 
       <th class="d-none d-table-cell" scope="col">ALWAYS 1</th> 
       <th class="d-none d-table-cell" scope="col">ALWAYS 2</th> 
       <th class="d-none d-table-cell d-md-table-cell" scope="col">MED 1</th> 
       <th class="d-none d-table-cell d-xl-table-cell" scope="col">XL ONLY 1</th> 
       <th class="d-none d-table-cell d-md-table-cell" scope="col">MED 2</th> 
       <th class="d-none d-table-cell d-xl-table-cell" scope="col">XL ONLY 2</th> 
      </tr> 
      </thead> 
      <tbody> 
       <tr> 
        <td>A</td> 
        <td>B</td> 
        <td>C</td> 
        <td>D</td> 
        <td>E</td> 
        <td>F</td> 
       </tr> 
      </tbody> 
     </table> 
    </div> 
</div> 

Answer 1

이 작동합니다.

쿼리가 작동 미디어를 볼 수있는 조각을 전체 화면으로 실행하거나 업데이트 된 바이올린을 체크 아웃 : https://jsfiddle.net/jkrielaars/tkcynbjk/1/

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/> 
 
    <div class="row"> 
 
     <div class="col-sm-12"> 
 
      <table class="table table-striped"> 
 
       <thead> 
 
       <tr> 
 
        <th class="" scope="col">ALWAYS 1</th> 
 
        <th class="" scope="col">ALWAYS 2</th> 
 
        <th class="d-none d-md-table-cell" scope="col">MED 1</th> 
 
        <th class="d-none d-xl-table-cell" scope="col">XL ONLY 1</th> 
 
        <th class="d-none d-md-table-cell" scope="col">MED 2</th> 
 
        <th class="d-none d-xl-table-cell" scope="col">XL ONLY 2</th> 
 
       </tr> 
 
       </thead> 
 
       <tbody> 
 
        <tr> 
 
         <td>A</td> 
 
         <td>B</td> 
 
         <td class="d-none d-md-table-cell">C</td> 
 
         <td class="d-none d-xl-table-cell">D</td> 
 
         <td class="d-none d-md-table-cell">E</td> 
 
         <td class="d-none d-xl-table-cell">F</td> 
 
        </tr> 
 
       </tbody> 
 
      </table> 
 
     </div> 
 
    </div>