Bootstrap Layout?

Hallo,

arbeite momentan mit Bootstrap (Blazor) an einer Webseite.

Ich habe in meinem Container 3 Rows, wobei jede Row 3 Card Elemente hat.
Wenn ich nun aber mein Browserfenster kleiner mache verrutscht der Text:

Code:

<div class="container-fluid">


    <div class="row">
        <h3>Suche:</h3>
    </div>


    <div class="row p-2">
        <div class="row">
            <div class="row">
                <h2>Liste</h2>  
                <hr />
            </div>
            <div class="col col-md-3">
                <div class="card h-100">
                    <p class="card-body card-text">This card on the left of the other two cards, with a fixed height and scrolling.</p>
                </div>
            </div>
            <div class="col col-md-3">
                <div class="card h-100">
                    <p class="card-body card-text">This card on the left of the other two cards, with a fixed height and scrolling.</p>
                </div>
            </div>
            <div class="col col-md-3">
                <div class="card h-100">
                    <p class="card-body card-text">This card on the left of the other two cards, with a fixed height and scrolling.</p>
                </div>
            </div>
            <div class="col col-md-3">
                <div class="card h-100">
                    <p class="card-body card-text">This card on the left of the other two cards, with a fixed height and scrolling.</p>
                </div>
            </div>
        </div>
    </div>
</div>

Das Layout passt sich schon an, der innere Text aber nicht warum ?
Liegt es daran das ich ein <p> Tag verwende ?
Wie kann ich in Zukunft sowas verhindern ?

Sollte so aussehen:

Answer 1

[regex9]

1) Die einzelnen Spalten sollten in einen eigenen .row-Container:

<div class="row p-2">
  <div class="row">
    <div class="row">
      <h2>Liste</h2>
      <hr />
    </div>
    <div class="row">
      <!-- column container -->
    </div>
  </div>
</div>

2) Bei Unterschreiten einer bestimmten Breite wird es mit einem Vierspaltenlayout nicht mehr klappen. Der Text hat nicht mehr genügend Platz und bricht folglich um.

Das heißt, du musst dir Gedanken darüber machen, wie die Container beispielsweise bei unter 576px aussehen sollen.

Bootstrap stellt Klassen für verschiedene Breakpoints zur Verfügung. Schau in die Dokumentation. Würdest du deine Boxen beispielsweise mit diesen Klassen ausstatten:

<div class="col-12 col-sm-6 col-md-3">

würde eine Karte mobil (bis 576px) die volle Breite einnehmen, auf Tabletgeräten (bis 767px) gäbe es ein Zweispaltenlayout und darüber das Vierspaltenlayout.