Anzahl der Spalten nach Bildschirmgröße?

Question

Bitte beachten Sie das folgende Layout für eine Seite. In einem Container befinden sich drei Spalten.

Das Problem, das ich lösen möchte, ist, dass für mobile Bildschirmgrößen ich die mittlere Spalte ausblenden möchte. Für Bildschirmgrößen größer als mobile, z. B. Tablet, Laptops und Desktops möchte ich die mittlere Spalte zeigen. Wie kann ich das erreichen? Alle drei Spalten sollten gleich breit sein.

Ich freue mich über jede Hilfe! Vielen Dank!

Answer 1

Bootstrap responsive utility classes Elemente sind bestimmte Haltepunkte zu verbergen oder zu zeigen, enthält. Die sichtbaren Klassen sind visible-xs-*, visible-sm-*, visible-md-* und visible-lg-*. Die verborgenen Klassen sind hidden-xs, hidden-sm, hidden-md und hidden-lg.

Wenn Sie ein Element für kleine und extra kleine Auflösungen verbergen möchten, können Sie so etwas wie <div class="col hidden-xs hidden-sm">

Bootply example

Answer 2

von CSS verwenden, können Sie etwas verbergen. Siehe unten:

<div class = "container"> 
     <div class="row"> 
     <div class="col"> 
     </div> 
     <div class="col column-to-hide"> 
     </div> 
     <div class="col"> 
     </div> 
     </div> 
    </div> 


<style> 
    @media screen and (max-width: 500px){ 
     .column-to-hide{ 
      display:none; 
     } 
    } 
    </style>