Hallo,ich habe eine Tabelle mit bootstrap grit in der formheder header header ...value1 value1 value1value2 value2 value2...wenn das ganze auf Handygröße eingestampft wird erhalte ich headerheaderheadervalue1value1value1value2value2value2wie könnte ich so ein Layout realisierenheadervalue1headervalue1headervalue1headervalue2...oder

Wie kann ich eine Tabelle Handytauglich mit Bootstrap Grid machen?

Hallo,

ich habe eine Tabelle mit bootstrap grit in der form

heder header header ...

value1 value1 value1

value2 value2 value2

...

wenn das ganze auf Handygröße eingestampft wird erhalte ich

header

value1

value2

wie könnte ich so ein Layout realisieren

header

value1

header

value1

header

value1

header

value2

...

oder

2 Antworten

medmonk

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, Technik, IT

21.12.2022, 12:56

Bei solchen Fragen sollten man möglichst immer den eigenen Quellcode teilen (z.B. über CodePen), damit jeder einsehen kann, wo der Hund begraben liegt. So ist es eher ein Raten ins Blaue hinaus, bis dann vielleicht mal die richtige Lösung herauskommt.

Beschäftige dich mit Media Queries, werfe einen Blick in die Bootstrap Dokumention und wende anschließend Bootstrap-eigene Klassen auf jene Elemente an, die sich bei einem Wechsel des Viewports anders verhalten sollen.

Woher ich das weiß:Berufserfahrung – UI/UX Designer, Full-Stack Developer

EinAlexander

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, HTML, Webseite

21.12.2022, 12:57

Wie kann ich eine Tabelle Handytauglich mit Bootstrap Grid machen?

<div class="row">
    <div class="col-12 col-sm-4">
      <p>header</p>
      <p>value1</p>
    </div>
    <div class="col-12 col-sm-4">
      <p>header</p>
      <p>value1</p>
    </div>
    <div class="col-12 col-sm-4">
      <p>header</p>
      <p>value1</p>
    </div>
</div>
<div class="row">
    <div class="col-12 col-sm-4">
        <p>value 2</p>
    </div>
    <div class="col-12 col-sm-4">
        <p>value 2</p>
    </div>
    <div class="col-12 col-sm-4">
        <p>value 2</p>
    </div>
</div>

Alex

Ähnliche Fragen

Grid mit Tailwind CSS und 1fr?

Seit längerem beschäftige ich mich mal wieder mit Tailwind CSS und stoße gleich am Anfang auf ein eigentlich simples Problem, für was ich aber keine einfach Lösung finde.

Ich versuche ein einfaches Layout zu erstellen, welches als Grundgerüst ein Grid hat, bei dem der Header und Footer eine explizite Höhe haben und der Main-Bereich flexibel ist. Das Layout sollte auch bei wenig Inhalt immer 100vh haben, so dass der Footer immer unten ist.

Mit reinem CSS wäre das einfach so lösbar:

CSS

.grid {
 min-height: 100vh;
 display: grid;
 grid-template-columns: 1fr; 
 grid-template-rows: 5rem 1fr 7rem;
}

HTML

<div class="grid">
 <header>Header</header>
 <main>Main</main>
 <footer>Footer</footer>
</div>

Mit TailwindCSS bekomme ich das irgendwie nicht hin – zumindest nicht ohne Custom-CSS. Ich kann mir aber kaum vorstellen, dass sich dies nicht auch mit dem vorhandenen Set realisieren lässt.

Hat hier jemand eine Idee, wie ich das mit TailwindCSS am einfachsten umsetze?

...zur Frage

VBA (Excel) Listbox Column Header Beschriftung?

Hallo!

Ich möchte in VBA bei einer mehrspaltigen Listbox die Header der einzelnen
Columns beschriften. Die Daten bezieht die Listbox allerdings nicht aus einer
vorformatierten Tabelle (RowScoure) sondern übere eine weitere Instanz im Code.

Die Eigenschaften der Listbox definiere mit einer With Anweisung wie folgt:

With ListBox1

.ColumnCount = 3

.ColumnWidths = "40;300;200"

.ColumnHeads = True

.IntegralHeight = False

.TextColumn = 1

.BoundColumn = 2

End With

Bei der Beschriftung der Header komme ich nun einfach nicht weiter.

Weiß hier eventuell jemand wie man das realisieren könnte?

Vielen Dank im Voraus!

Mfg

...zur Frage

Ist ein coding bootcamp seriös?

Hallo zusammen,

ich möchte mich nach ausgiebigen Überlegungen mit web-development beschäftigen.

Ich habe diverse Angebote in Form von sogenannten coding bootcamps gesehen und wollte wissen ob da jemand Erfahrungen hat.

Kann man das wirklich in remote, auf so kurze Zeit (ca. 4 Monate lernen, und das man dan auch für Arbeitgeber interessant wird (Arbeitsvermittlung wird dort auch angeboten) und man den Beruf auch wirklich ausüben kann.

Oder geht es mehr darum, dass die Anbieter ,,nur'' Geld dabei verdienen.

Coding/programmieren ist ein nicht endender Lernprozess, das ist mir bewusst.

Danke vielmals! Auf eure Antworten freue ich mich :)

...zur Frage

CSS Grid Webseite funktioniert nicht?

Das Layout für die Webseite funktioniert nicht. Ich habe das Problem lange gesucht, aber nicht gefunden. Ich wäre über jegliche Hilfe dankbar.

CSS:

.container {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(6, 1fr);
  grid-template-areas:
    h h h h h h
    c c c c c s
    c c c c c s
    c c c c c s
    c c c c c s
    f f f f f s
}

.footer {
  grid-area: f;
}

.header {
  grid-area: h;
}

.content {
  grid-area: c;
}

.side {
  grid-area: s;
}

HTML-Datei:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="style.css" rel="stylesheet">
  <nav>
</head>
<body class="container">
  <title>Eigene Webseite von ---</title>
  <header class="header">
    <h1>Hauptseite meiner Webseite</h1>
  </header>
  <main class="content">
    <div id="abstand">
      <h3>Interessen:</h3>
      <ul>
        <li>Technik</li>
        <li>Videospiele</li>
      </ul>
      <u><h3>Ich bin:</h3></u>
      <p>Optimistisch<br>Geduldig<br>Hilfsbereit</p>
      <a id="link" href="https://www.netflix.com/at/">Mein Link</a>
      <div>
        <div id="bild">
          <img src="bild1.jpg" width=300 height=186 alt="Bild über mich">
        </div>
      </div>
      <div id="Motte"></div>
    </div>
  </main>
  <aside class="side">
    <p>News/Einträge</p>
  </aside>
  <div class="daten">
    <footer class=footer>
      <h4>Hier könnte ein Motto stehen</h4>
    </footer>
    <div id="daten">
      <p>---</p>
      <p>--</p>
      <a href="----</a>
    </div>
  </div>
</div>
</nav>
</body>
</html>

...zur Frage

Footer ganz unten, wie?

Hey! Ich möchte meinen footer ganz unten haben und in oller breite! Wie mache ich das?

Hier die Skripte:

...zur Frage

CSS Grid leere Zelle?

Hi,

bin gerade etwas Ratlos wie ich das mit css grid umsetzen kann.

Aktuelle habe ich folgenden Code

<div class="grid-container">
  <div>Ich soll leer sein</div>
  <div>Ich soll leer sein</div>
  <div>Ich soll leer sein</div>
  <div class="grid-item">Ein Text</div>
  <div>Ich soll leer sein</div>
  <div>Ich soll leer sein</div>
  <div>Ich soll leer sein</div>
  <div class="grid-item">Ein Text</div>
  <input type="text" class="grid-item">
  <div class="grid-item">Ein Text</div>
  <select class="grid-item"></select>
  <div class="grid-item">Ein Text</div>
</div>

CSS 
.grid-container {
  display: grid;
  gap: .5em;
  grid-template-columns: repeat(4, 1fr);
}

https://jsfiddle.net/tb2e75L8/2/

Jetzt will ich jedoch alle Div's mit dem Inhalt "Ich soll leer sein" aus dem html entfernen ohne jedoch die nachfolgenden zu verschieben. Also sozusagen eine Leere Zelle. Ich habe schon über grid-template-areas nachgelesen, jedoch bräuchte ich da für jedes item eine eigene ID, oder sehe ich das falsch?

Für sonstige Vorschläge zum realisieren von diesem Layout (auch ohne Grid) bin ich grundsätzlich auch offen.

Vielen Dank im Voraus

whgoffline

...zur Frage

Wer kann besser programmieren?

Wer kann besser programmieren, ein Informatiker mit Studium(FH) oder ein Fachinformatiker für Anwendungsentwicklung?

Freut mich sehr eure Meinungen dazu zu hören

...zur Frage

Emits in Vue sind das Gegenteil von Props?

Ich lerne gerade das Javascript Framework Vue.js und hab die zwei Konzepte Emits und Props gelernt, weiß nur nicht ob ich das richtig verstanden hab.

Hab das so verstanden das Props, Informationen sind die vom Parent Component zum Child Component übergeben werden und das Emits Informationen vom Child Component zum Parent Component übergeben.

Sozusagen ist Emit das gegenstück zum Prop ?

...zur Frage

Was kommt nach HTML > CSS >?

1.Html

2.Css

Wie sollte man weiter machen?

...zur Frage

Bootstrap Column Anordnung ändern (mobile)?

Hallo liebe Community,

ich arbeite gerade an einem Webshop und erstelle die Startseite selbst mit HTML und CSS und dem Bootstrap Grid Layout. Nun habe ich Bilder und Texte welche auf dem Desktop jeweils abwechselnd und untereinander kommen.

Also jeweils Bild und Text in einer "row" und dann entweder der Text oder das Bild als erstes. So ergibt sich in der Reihenfolge: Text-Bild, Bild-Text.

Für die Desktopansicht ist das auch genau so gewünscht, allerdings hätte ich gerne wenn die Columns beim Smartphone untereinander rutschen, dass nicht zwei Bilder nacheinander kommen, sondern: Text-Bild, Text-Bild.

Wie lässt sich das realisieren?

Hier mal ein bisschen Code, sehr reduziert.

Doppelter Content und ein/ausblenden über "hidden" ist für mich nicht möglich aus SEO-Gründen.

Danke :)

  <div class="container">

    <div class="row">
      <div class="col-lg-9">
        <h3>Überschrift</h3>
        <p>Lorem ipsum dolor.</p>
      </div>
      <div class="col-lg-3">
        <img src="img/platzhalter.jpg">
      </div>
    </div>

    <div class="row">
      <div class="col-lg-3">
        <img src="img/platzhalter.jpg">
      </div>
      <div class="col-lg-9">
        <h3>Überschrift</h3>
        <p>Lorem ipsum dolor sit.</p>
      </div>
    </div>

  </div>

...zur Frage

Javascript, html und css?

Ich habe jetzt mit programmieren angefangen, und um genauer zu sein mit Javascript. Ich weiß jetzt dass man Javascript, HTML und css zusammen kombinieren kann. Ich weiß aber immer noch nicht wie das gehen kann. Haben alle nicht verschiebe Codes oder wie ist es genau zu verstehen ?

...zur Frage

div genau mittig zentrieren?

Hi, ich will ein <div> mittig zentrieren, also nicht nur horizontal sondern auch vertikal, also einfach in der Mitte des Bildschirms. Jemand ne Idee wie das gehen könnte, hab schon fast das ganze Internet durchkämmt...

So soll das am Ende sein... DANKE!!!

...zur Frage

Um wie viel verdient ein Freiberufler Softwareentwickler?

Ein Freund von mir meinte das man als Freiberufler Softwareentwickler Monatlich doppelt so viel verdienen kann wie ein Angestellter Softwareentwickler, also ca.8000 Monatlich...das kann doch nicht stimmen, das klingt so unrealistisch, aber was haltet ihr davon?

...zur Frage

Website in Android App umwandeln?

Gibt es ein Framework, dass man seine erstellte Website in ein Android App umwandelt?

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen