Dieses Forum nutzt Cookies
Dieses Forum verwendet Cookies, um deine Login-Informationen zu speichern, wenn du registriert bist, und deinen letzten Besuch, wenn du es nicht bist. Cookies sind kleine Textdokumente, die auf deinem Computer gespeichert sind; Die von diesem Forum gesetzten Cookies düfen nur auf dieser Website verwendet werden und stellen kein Sicherheitsrisiko dar. Cookies auf diesem Forum speichern auch die spezifischen Themen, die du gelesen hast und wann du zum letzten Mal gelesen hast. Bitte bestätige, ob du diese Cookies akzeptierst oder ablehnst.

Ein Cookie wird in deinem Browser unabhängig von der Wahl gespeichert, um zu verhindern, dass dir diese Frage erneut gestellt wird. Du kannst deine Cookie-Einstellungen jederzeit über den Link in der Fußzeile ändern.

Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
div Container bei col-sm nicht anzeigen.
#1
Hallo Forum,

ich fange ganz frisch mit Bootstrap 4 an und habe mir so einiges angesehen bzw. angelesen.


Bevor ich mit meinen Webprojekt angefangen bin, habe ich mir andere responsive HP's angesehen.

Da ist mir aufgefallen, daß der Betreiber Zellen einer Tabelle nicht anzeigen läßt, wenn man die 
Mobile Ansicht bei Chrome aufruft.

Wie kann man sowas nach programmieren in Bootstrap 4?

Kann man eine einzelne Zelle bzw. Div Container ausblenden oder geht das nur über 


Code:
.d-{sm,md,lg,xl}-none -> Element ausblenden


Gruß Franziska1993

PS: Anbei zwei Screenshots (Desktop- und Mobileansicht)


Angehängte Dateien Thumbnail(s)
       
Zitieren
#2
Bei eine div kannst du das einfach mit d-none d-lg-block d-md-block u.s.w. machen



Bsp. <div class="col-md-3 .d-sm-none .d-md-block">



Indiesen Beispiel wird der Container bei sm (>= 576px) auf "display: none" gesetzt.



siehe Link



Du kanns das auch über Media Querys machen:



Bsp.



HTML5
  1.  
  2.         /** Extra kleine Geräte (Telefone Portraitansicht, weniger als 576px) **/
  3.  
  4.         @media (max-width: 575.98px) {
  5.  
  6.             .spalte-2 {
  7.  
  8.                 display: none;
  9.  
  10.             }
  11.  
  12.             .spalte-5 {
  13.  
  14.                 display: none;
  15.  
  16.             }
  17.  
  18.         }
  19.  
  20.  
  21.  
  22.         /** Kleine Geräte (Telefone im Querformat, 576px und höher)**/
  23.  
  24.         @media (min-width: 576px) and (max-width: 767.98px) {
  25.  
  26.             .spalte-5,
  27.  
  28.             .spalte-5 {
  29.  
  30.                 display: none;
  31.  
  32.             }
  33.  
  34.         }
  35.  
  36.     </style>
  37.  
  38.  
  39.  
  40.  
  41.  
  42.      <table class="table">
  43.  
  44.             <thead>
  45.  
  46.                 <tr>
  47.  
  48.                     <th class="spalte-1" scope="col">#</th>
  49.  
  50.                     <th class="spalte-2" scope="col">Vorname</th>
  51.  
  52.                     <th class="spalte-3" scope="col">Name</th>
  53.  
  54.                     <th class="spalte-4" scope="col">E-mail</th>
  55.  
  56.                     <th class="spalte-5" scope="col">Telefon</th>
  57.  
  58.                 </tr>
  59.  
  60.             </thead>
  61.  
  62.             <tbody class="spalte-4">
  63.  
  64.                 <tr>
  65.  
  66.                     <th class="spalte-1" scope="row">1</th>
  67.  
  68.                     <td class="spalte-2">Mark</td>
  69.  
  70.                     <td class="spalte-3">Otto</td>
  71.  
  72.                     <td class="spalte-4">no@name.com</td>
  73.  
  74.                     <td class="spalte-5">0815</td>
  75.  
  76.                 </tr>
  77.  
  78.                 <tr>
  79.  
  80.                     <th class="spalte-1" scope="row">2</th>
  81.  
  82.                     <td class="spalte-2">Jacob</td>
  83.  
  84.                     <td class="spalte-3">Thornton</td>
  85.  
  86.                     <td class="spalte-4">no@name.com</td>
  87.  
  88.                     <td class="spalte-5">0190</td>
  89.  
  90.                 </tr>
  91.  
  92.                 <tr>
  93.  
  94.                     <th class="spalte-1" scope="row">3</th>
  95.  
  96.                     <td class="spalte-2">Tom</td>
  97.  
  98.                     <td class="spalte-3">Meyer</td>
  99.  
  100.                     <td class="spalte-4">no@name.com</td>
  101.  
  102.                     <td class="spalte-5">0800</td>
  103.  
  104.                 </tr>
  105.  
  106.                 <tr>
  107.  
  108.                     <th class="spalte-1" scope="row">3</th>
  109.  
  110.                     <td class="spalte-2">Larry</td>
  111.  
  112.                     <td class="spalte-3">the Bird</td>
  113.  
  114.                     <td class="spalte-4">no@name.com</td>
  115.  
  116.                     <td class="spalte-5">0190</td>
  117.  
  118.                 </tr>
  119.  
  120.             </tbody>
  121.  
  122.         </table>


Zitieren
#3
Hallo The-Error,

danke für deine Antwort auf meine Frage, die ich gestellt habe.

Ich werde da noch einiges ausprobieren.

Gruß Franziska
Zitieren


Gehe zu:


Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste
[-]
Willkommen im ersten deutschen Bootstrap-Forum
You have to register before you can post on our site.

Benutzername/E-Mail:


Passwort:





[-]
Letzte Beiträge
Hamburger Menü komplett anders gestalten
Last Post: The-Error
Heute 10:11
» Replies: 1
» Views: 21
Aus Modal-Form heraus Daten per $_POST s...
Last Post: doofi
16.10.2019 23:16
» Replies: 0
» Views: 29
div Container bei col-sm nicht anzeigen.
Last Post: Franziska1993
16.09.2019 18:18
» Replies: 2
» Views: 444

[-]
Private Messages
Please login or register to use this functionality.

[-]
Statistics
» Members: 302
» Latest member: doofi
» Forum threads: 250
» Forum posts: 992

Full Statistics

[-]
Tutorials
Get Started
Text/Typography
Gridsystem
Dropdowns
Navigation Bar
Modal
Farben
Jumpotron
Popover
Formulare
Carousel (Slider)
Die Höhe von Elementen mit Klassen h-*
Flip Cards
Bild Overlay-Hover-Effekt
Google Fonts einbinden
Flexbox Bootstrap 4
Responsive Breakpoints

[-]
Wer ist online
There are currently no members online.

>