Bootstrap, warum geht row-cols- nicht?

Warum funktioniert das hier mit row-cols-2 von Bootstrap:

<div class="container">
        <div class="row row-cols-2">
          <div class="col">Column</div>
          <div class="col">Column</div>
          <div class="col">Column</div>
          <div class="col">Column</div>
        </div>
      </div>

Dies hier aber nicht? Die zwei Elemente nimmt er hier nicht an, was übersehe ich?

<div class="container">
        <div class="row g-3 row-cols-2">
            <div class="card" style="width: 18rem;">
                <div class="card-body">
                  <h5 class="card-title">Card title</h5>
                  <h6 class="card-subtitle mb-2 text-body-secondary">Card subtitle</h6>
                  <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                  <a href="#" class="card-link">Card link</a>
                  <a href="#" class="card-link">Another link</a>
                </div>
            </div>
            <div class="card" style="width: 18rem;">
                <div class="card-body">
                  <h5 class="card-title">Card title</h5>
                  <h6 class="card-subtitle mb-2 text-body-secondary">Card subtitle</h6>
                  <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                  <a href="#" class="card-link">Card link</a>
                  <a href="#" class="card-link">Another link</a>
                </div>
            </div>
            <div class="card" style="width: 18rem;">
                <div class="card-body">
                  <h5 class="card-title">Card title</h5>
                  <h6 class="card-subtitle mb-2 text-body-secondary">Card subtitle</h6>
                  <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                  <a href="#" class="card-link">Card link</a>
                  <a href="#" class="card-link">Another link</a>
                </div>
            </div>
            <div class="card" style="width: 18rem;">
                <div class="card-body">
                  <h5 class="card-title">Card title</h5>
                  <h6 class="card-subtitle mb-2 text-body-secondary">Card subtitle</h6>
                  <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                  <a href="#" class="card-link">Card link</a>
                  <a href="#" class="card-link">Another link</a>
                </div>
            </div>
            <div class="card" style="width: 18rem;">
                <div class="card-body">
                  <h5 class="card-title">Card title</h5>
                  <h6 class="card-subtitle mb-2 text-body-secondary">Card subtitle</h6>
                  <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                  <a href="#" class="card-link">Card link</a>
                  <a href="#" class="card-link">Another link</a>
                </div>
            </div>
        </div>
    </div>

1 Antwort

HoiZusammen

02.08.2024, 11:23

Deine Verschachtelung ist falsch.

<div class="row g-3 row-cols-2">
    <div class="col">
        <div class="card" style="width: 18rem;"></div>
    </div>
    <div class="col">
        <div class="card" style="width: 18rem;"></div>
    </div>
</div>

OpaSteve

Beitragsersteller

02.08.2024, 11:40

Vielen Dank! In der Tat, wenn ich nun noch zusätzlich "<div class="col">" hinzufüge funktioniert es. Das mit der falschen verschachtelung habe ich aber leider nicht vestanden, es werden doch alle Divs geöffnet und geschlossen?

HoiZusammen

02.08.2024, 11:46

@OpaSteve

Ähnliche Beiträge

Bootstrap erlaubt?

Darf man Bootstrap einfach so benutzen? Oder muss man irgendwas zum Thema Urheberrecht beachten? Muss man Bootstrap/ den Urheber irgendwie angeben? Darf man bootstrap auch einfach so kommerziell nutzen?

...zum Beitrag

Navbar mit Bootstrap klappt nicht wieder ein?

Hallo zusammen, ich habe folgendes Problem:

Ich habe das erste Navbar-Beispiel aus der Bootstrap-Dokumentation kopiert https://getbootstrap.com/docs/5.3/components/navbar/). Dort klappt die Navbar auf kleinen Bildschirmen beim Klick auf die drei Striche auf und nach einem zweiten Klick wieder zu. Bei mir ist es aber so, dass sich die Navbar nicht wieder einklappen lässt, nachdem man sie geöffnet hat (Nur bei Klick auf einen Link in der Navbar lässt sie sich zuklappen, nicht bei weiterem Klick auf die drei Striche). Hier mein Code: https://pastebin.com/kUnYBVkY

...zum Beitrag

Welches CSS Framework und welches Planungstool sollte ich nutzen?

Hallo,

bisher habe ich jede Idee und jedes Projekt von Null an selbst programmiert und CSS geschrieben.

Um mich zukünftig mehr auf JS und React konzentrieren zu können und auch Ideen schneller umsetzen zu können, möchte ich vorgefertigte HTML/CSS Komponenten verwenden.

Zudem möchte ich dieses Framework auch in Figma nutzen können, um die Idee besser planen zu können.

Welches CSS Framework würdet ihr empfehlen und warum? Es sollte ein modernes Design haben (Bootstrap fällt daher für mich raus). Eine große Auswahl an Komponenten haben, welche man einfach kombinieren und anpassen kann. Die Lizenz sollte auch für kommerzielle Projekte gelten und möglichst kostenlos sein. Tailwind ist kostenpflichtig oder?
Welches Tool könnt ihr noch empfehlen, um eine App/PWA zu skizzieren und zu planen?

Gruß ebody

...zum Beitrag

Arduino 32 Segment Display Counter programmieren?

Hi,

wie kann ich bei einem Arduino 32 Segment Display einen Counter programmieren der von 9 auf 0 runter geht? Ich habe mir zuerst dieses Standart BSP von `Hello World `: Das ist der Script:

/*
LiquidCrystal Library - Hello World
Demonstrates the use a 16x2 LCD display. The LiquidCrystal
library works with all LCD displays that are compatible with the
Hitachi HD44780 driver. There are many of them out there, and you
can usually tell them by the 16-pin interface.
This sketch prints "Hello World!" to the LCD
and shows the time.
The circuit:
* LCD RS pin to digital pin 12
* LCD Enable pin to digital pin 11
* LCD D4 pin to digital pin 5
* LCD D5 pin to digital pin 4
* LCD D6 pin to digital pin 3
* LCD D7 pin to digital pin 2
* LCD R/W pin to ground
* LCD VSS pin to ground
* LCD VCC pin to 5V
* 10K resistor:
* ends to +5V and ground
* wiper to LCD VO pin (pin 3)
Library originally added 18 Apr 2008
by David A. Mellis
library modified 5 Jul 2009
by Limor Fried (http://www.ladyada.net)
example added 9 Jul 2009
by Tom Igoe
modified 22 Nov 2010
by Tom Igoe
modified 7 Nov 2016
by Arturo Guadalupi
This example code is in the public domain.
http://www.arduino.cc/en/Tutorial/LiquidCrystalHelloWorld
*/
// include the library code:
#include <LiquidCrystal.h>
// initialize the library by associating any needed LCD interface pin
// with the arduino pin number it is connected to
const int rs = 12, en = 11, d4 = 5, d5 = 4, d6 = 3, d7 = 2;
LiquidCrystal lcd(rs, en, d4, d5, d6, d7);
void setup() {
// set up the LCD's number of columns and rows:
lcd.begin(16, 2);
// Print a message to the LCD.
lcd.print("Motor startet in:");
}
void loop() {
// set the cursor to column 0, line 1
// (note: line 1 is the second row, since counting begins with 0):
lcd.setCursor(8,2);
// print the number of seconds since reset:
lcd.print(millis() / 1000);
}

Danke im voraus :-).

...zum Beitrag

Python wie löse 'NoneType' object is not subscriptable?

Hallo!

Ich schreibe ein kleines Pythonprogramm, das als Web Crawler fungieren soll.Leider erhalte ich in Zeile 36 ein Fehler:

  brand = make_rating_sp[0].img["title"].title()
TypeError: 'NoneType' object is not subscriptable

Leider, finde ich keine Lösung. Wie könnte ich diesen Fehler lösen? Danke im Voraus!

make_rating_sp[0].img is None.

from bs4 import BeautifulSoup as soup  # HTML data structure
from urllib.request import urlopen as uReq  # Web client

# URl to web scrap from.
# in this example we web scrap graphics cards from Newegg.com
page_url = "http://www.newegg.com/Product/ProductList.aspx?Submit=ENE&N=-1&IsNodeId=1&Description=GTX&bop=And&Page=1&PageSize=36&order=BESTMATCH"

# opens the connection and downloads html page from url
uClient = uReq(page_url)

# parses html into a soup data structure to traverse html
# as if it were a json data type.
page_soup = soup(uClient.read(), "html.parser")
uClient.close()

# finds each product from the store page
containers = page_soup.findAll("div", {"class": "item-container"})

# name the output file to write to local disk
out_filename = "graphics_cards.csv"
# header of csv file to be written
headers = "brand,product_name,shipping \n"

# opens file, and writes headers
f = open(out_filename, "w")
f.write(headers)

# loops over each product and grabs attributes about
# each product
for container in containers:
    # Finds all link tags "a" from within the first div.
    make_rating_sp = container.div.select("a")

    # Grabs the title from the image title attribute
    # Then does proper casing using .title()
    brand = make_rating_sp[0].img["title"].title()

    # Grabs the text within the second "(a)" tag from within
    # the list of queries.
    product_name = container.div.select("a")[2].text

    # Grabs the product shipping information by searching
    # all lists with the class "price-ship".
    # Then cleans the text of white space with strip()
    # Cleans the strip of "Shipping $" if it exists to just get number
    shipping = container.findAll("li", {"class": "price-ship"})[0].text.strip().replace("$", "").replace(" Shipping", "")

    # prints the dataset to console
    print("brand: " + brand + "\n")
    print("product_name: " + product_name + "\n")
    print("shipping: " + shipping + "\n")

    # writes the dataset to file
    f.write(brand + ", " + product_name.replace(",", "|") + ", " + shipping + "\n")

f.close()  # Close the file

...zum Beitrag

CSS Buttons verschieben?

Hallo, ich möchte auf meiner Website, dass die Buttons untereinander und nicht nebeneinander angezeigt werden wie hier:

habe schon einiges probiert aber nichts funktioniert richtig...

mein html Code ist das hier:

<!DOCTYPE html>
<html lang="de">
<head>
    <link href="style_bypass.css" rel="stylesheet">
    <title>Bypass</title>
</head>
<body id="links">


<a href=""><button style="--color:#00ccff;--border:2px;--slant:.5em">Set Lockscreen</button></a>
<a href=""><button style="--color:#00ccff;--border:2px;--slant:.5em">Einstellungen</button></a>
<a href=""><button style="--color:#00ccff;--border:2px;--slant:.5em">Test Video</button></a>
<a href=""><button style="--color:#00ccff;--border:2px;--slant:.5em">Galaxy Store</button></a>
<a href=""><button style="--color:#00ccff;--border:2px;--slant:.5em">Google Quick Search</button></a>
<a href=""><button style="--color:#00ccff;--border:2px;--slant:.5em">Youtube</button></a>



</body>

Und mein CSS Code der hier:

button {
    --border: 5px;    /* the border width */
    --slant: 0.7em;   /* control the slanted corners */
    --color: #37E8FC; /* the color */
    
    font-size: 35px;
    padding: 0.4em 1.2em;
    border: none;
    cursor: pointer;
    font-weight: bold;
    color: var(--color);
    background: 
       linear-gradient(to bottom left,var(--color)  50%,#0000 50.1%) top right,
       linear-gradient(to top   right,var(--color)  50%,#0000 50.1%) bottom left;
    background-size: calc(var(--slant) + 1.3*var(--border)) calc(var(--slant) + 1.3*var(--border));
    background-repeat: no-repeat;
    box-shadow:
      0 0 0 200px inset var(--s,#0000),
      0 0 0 var(--border) inset var(--color);
    clip-path: 
        polygon(0 0, calc(100% - var(--slant)) 0, 100% var(--slant),
                100% 100%, var(--slant) 100%,0 calc(100% - var(--slant))
               );
    transition: color var(--t,0.3s), background-size 0.3s;
  }
  button:hover,
  button:active{
    background-size: 100% 100%;
    color: #fff;
    --t: 0.2s 0.1s;
  }
  button:focus-visible {
    outline-offset: calc(-1*var(--border));
    outline: var(--border) solid #000a;
  }
  button:active {
    --s: #0005;
    transition: none;
  }
  
  
  
  body#links {
    display:grid;
    grid-auto-flow:column;
    grid-gap:px;
    place-content:center;
    margin:0;
    height:100vh;
    background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
  }

Was genau muss ich in der CSS Datei bearbeiten, dass die Buttons nicht nebeneinander sondern untereinander angezeigt werden?

...zum Beitrag

Warum benutzt man Tailwind CSS?

Wenn man mitten in den HTML Code , sowas schreibt wie

<p class="bold-900"> test </p>

Dann ergibt das für mich noch keinen sinn aus drei Gründen.

Man kann zwar bei wenig Code schnell im Code sehen was passiert aber schnell wird das doch komplett unordentlich, als würde wenn man <p style="color:red;"> benutzen.
Es ist doch Dumm sich die ganzen Tailwind Klassen auswendig zu lernen anstatt gleich die CSS Eigenschaften. Es macht doch kaum einen unterschied, ob font-size : 50px oder class="fontsize-50".
Tailwind hat auch keine fertige Komponenten wie Bulma oder Bootstrap falls man keine lust hat mal irgendwas selber zu machen.

Oder wie seht ihr das ?

Lerne zurzeit React und in vielen React Tutorials wird Tailwind genutzt.

Lohnt sich das so viel mehr als normales Css/Scss zu benutzen ?

...zum Beitrag

Blazor Navigation Bar?

Ich versuche Blazor zu lernen und möchte jetzt die Standard-Navbar loswerden. Ich habe ein schönes Navbar-CSS-Template gefunden.

Hier ist der „Code“

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.topnav {
  overflow: hidden;
  background-color: #333;
}

.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

Wie kann ich es als Navbar verwenden?

Ich meine, wie macht man den Blazor Code Behind?

...zum Beitrag

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

...zum Beitrag

Bootstrap owl carousel höhe bearbeiten?

Hallo zusammen,

Ich bin gerade am bearbeiten eines Website Templates, welches mit Bootstrap geschrieben wurde. Nun möchte ich die hero section, welche durch das owl carousel funktioniert so anpassen, dass die Section auch auf Mobilgeräten die gesamte Höhe des Bildschirms einnimmt. Weiß jemand, was ich dafür verändern muss?

...zum Beitrag

CSS den Text über blur effekt?

Also der body soll verschwommen sein aber nicht der div

(oder nur der div Text).

Hab es schon mit z-index versucht

 <style>
        body{
            filter: blur(5px);
            position: relative;
            z-index: -10;
        }
        div{
            font-size: xx-large;
            filter: blur(0px);
            position: relative;
            z-index: 10;
        }
    </style>
</head>
<body>
    <div>
        Hallo
    </div>
</body>

...zum Beitrag

Website Elemente funktionieren lokal aber auf Server nicht?

Ich habe mir eine Website mit Bootstrap erstellt. Wenn das Fenster zu klein wird dann klappt sich die Navbar ein und man muss auf einen Button klicken um diese wieder auszufahren. Das funktioniert lokal ganz normal und gut aber sobald ich es auf einen Webserver hochlade geht es nicht mehr. Alles andere an der Website geht aber nur dieser Button will nicht funktionieren. Was kann ich da machen?
PS. Ich nutze Plesk zum hosten falls das jemandem hilft.

...zum Beitrag

Bootstrap 5.3 Dropdown Pfeil?

Hallo, in einem Dropdown was ich mit Bootstrap erstelle wird der Pfeil unten statt auf der rechten Seite angezeigt

Hier ist der HTML Code von dem Toggle Button des Dropdowns:

<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
   <div class="d-flex">
      <span class="material-symbols-outlined">language</span>
      <span class="ms-2">Automatisch</span>
   </div>
</button>

Ich hab schon herausgefunden das der Fehler vom Div kommt, allerdings wenn ich das Div Entferne sieht es so aus:

Wie man sieht ist dort, dann allerdings das Icon nicht mehr Zentriert. Weiß jemand wie man entweder die Positionierung vom Dropdown Pfeil oder die Ausrichtung vom Icon in Ordnung bringen kann.

Vielen Dank schon mal im Voraus für jede Antwort!

...zum Beitrag

Bootstrap Hyperlink?

Möchte gerne web.html öffnen. Wenn ich eine https Adresse einfüge, geht es problemlos.

Was mache ich falsch?

...zum Beitrag

Was möchtest Du wissen?

Deinen Beitrag erstellen