wake-up-neo.com

Bootstrap 4 - Responsive Karten in Kartenspalten

Ich spiele mit Bootstrap 4 und ich kann keine Lösung finden, um den Karten in einem div mit class="card-columns" Eine Reaktionsfähigkeit zu verleihen (diese Klasse gilt a Mauerwerk-ähnlicher Effekt auf die Karten innerhalb der Div, die diese Klasse haben).

In Bootstrap 3 war es einfach , "Karten" ansprechend zu gestalten, da es möglich war, so etwas wie class="col-md-3 col-sm-6 col-xs-12" Zu einem Div mit thumbnail, caption usw.

Wie kann ich den gleichen Effekt erzielen, wenn ich Karten in Bootstrap 4 verwende?

Hier ist das HTML:

<body>

<div class="container-fluid">
    <div class="row">

        <div class="col-md-4 hidden-sm-down" id="map_container">
            <p>here we put the map</p>
        </div>

        <div class="col-md-8 col-sm-12 right_box">

            <div class="row">

                // here there's code for navbar

            </div><!-- row -->

            <div class=row">
                <div class="card-columns">
                    <?php
                    // Create and check connection

                    if ($result->num_rows > 0) {

                        // output card design
                        while($row = $result->fetch_assoc()) {

                            echo '<div class="card">
                                    <img class="card-img-top" src="dance' . $row["id"] . '.jpg" alt="' . $row["name"] . '">
                                    <div class="card-block">
                                        <h4 class="card-title">' . $row["name"] . '</h4>
                                        <p class="card-text">Text. Card content.</p>
                                    </div>
                                    <div class="card-footer text-muted">
                                        <ul class="list-inline">
                                            <li><i class="fa fa-user"></i></li>
                                            <li>14</li>
                                        </ul>
                                    </div>
                                  </div><!-- card -->';
                        }
                    } else {
                        echo "0 results";
                    }

                    $conn->close();
                    ?>
                </div><!-- container card-columns -->
            </div><!-- row -->
        </div><!-- col-md-8 right_box -->
    </div><!-- row -->
</div><!-- container-fluid -->
</body>

Und hier ist das CSS, das ich verwendet habe:

#map_container {
background-image: url(map.png);
height: 100vh;
}

.right_box {
-webkit-box-shadow: -2px 0px 2px 0px rgba(0,0,0,0.75);
-moz-box-shadow: -2px 0px 2px 0px rgba(0,0,0,0.75);
box-shadow: -2px 0px 2px 0px rgba(0,0,0,0.75);
}

.card {
border-radius: 0 !important;
border: 0 none;
-webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.5);
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.5);
margin-left: 1px;
margin-right: 1px;
}

.card-img-top {
width: 100%;
border-radius: 0 !important;
}

.card-columns {
padding-top: 15px;
}

Im Folgenden sind zwei Bilder aufgeführt, um meine Situation klarer zu machen:

Großbild

Kleinerer Bildschirm

Ich möchte, dass Karten auf kleineren Bildschirmen vertikal gestapelt werden.

Vielen Dank für Ihre Anregungen!

44
davideghz

Bootstrap 4 (4.0.0-alpha.2) verwendet die CSS-Eigenschaft column-count In der Klasse card-columns, Um festzulegen, wie viele Kartenspalten im Element div angezeigt werden sollen.
Diese Eigenschaft hat jedoch nur zwei Werte:

  • Der Standardwert 1 für kleine Bildschirme (max-width: 34em)
  • Der Wert für alle anderen Größen (min-width: 34em)

So wird es in bootstrap.min.css implementiert:

@media (min-width: 34em) {
    .card-columns {
        -webkit-column-count:3;
        -moz-column-count:3;
        column-count:3;
        ⋮
    }
    ⋮
}

Um den Kartenstapel reaktionsfähig zu machen, können Sie der CSS-Datei die folgenden Medienabfragen hinzufügen und die Werte für min-width Gemäß Ihren Vorgaben ändern Anforderungen :

@media (min-width: 34em) {
    .card-columns {
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
    }
}

@media (min-width: 48em) {
    .card-columns {
        -webkit-column-count: 3;
        -moz-column-count: 3;
        column-count: 3;
    }
}

@media (min-width: 62em) {
    .card-columns {
        -webkit-column-count: 4;
        -moz-column-count: 4;
        column-count: 4;
    }
}

@media (min-width: 75em) {
    .card-columns {
        -webkit-column-count: 5;
        -moz-column-count: 5;
        column-count: 5;
    }
}
38
Faheel Ahmad

Update 2018 - Bootstrap 4

Sie können einfach den SASS-Mixin verwenden, um die Anzahl der Karten in jeder Haltepunkt-/Gitterschicht zu ändern.

.card-columns {
  @include media-breakpoint-only(xl) {
    column-count: 5;
  }
  @include media-breakpoint-only(lg) {
    column-count: 4;
  }
  @include media-breakpoint-only(md) {
    column-count: 3;
  }
  @include media-breakpoint-only(sm) {
    column-count: 2;
  }
}

SASS Demo: http://www.codeply.com/go/FPBCQ7sOjX

Oder, nur CSS wie folgt ...

@media (min-width: 576px) {
    .card-columns {
        column-count: 2;
    }
}

@media (min-width: 768px) {
    .card-columns {
        column-count: 3;
    }
}

@media (min-width: 992px) {
    .card-columns {
        column-count: 4;
    }
}

@media (min-width: 1200px) {
    .card-columns {
        column-count: 5;
    }
}

Nur-CSS-Demo: https://www.codeply.com/go/FIqYTyyWWZ

44
Zim

Ich habe ein Kartenlayout erstellt - 3 Karten in einer Reihe mit Bootstrap 4/CSS3 (natürlich reagiert es). Im folgenden Beispiel werden grundlegende Bootstrap 4 Klassen verwendet wie container, row, col-x, list-group und list-group-item. Dachte hier zu teilen, wenn sich jemand für so ein Layout interessiert.

enter image description here

[~ # ~] html [~ # ~]

<div class="container">
  <div class="row">
    <div class="col-sm-12 col-md-4">
      <div class="custom-column">
        <div class="custom-column-header">Header</div>
        <div class="custom-column-content">
          <ul class="list-group">
            <li class="list-group-item"><i class="fa fa-check"></i> Cras justo odio</li>
            <li class="list-group-item"><i class="fa fa-check"></i> Dapibus ac facilisis in</li>
            <li class="list-group-item"><i class="fa fa-check"></i> Morbi leo risus</li>
            <li class="list-group-item"><i class="fa fa-check"></i> Porta ac consectetur ac</li>
            <li class="list-group-item"><i class="fa fa-check"></i> Vestibulum at eros</li>
          </ul>
        </div>
        <div class="custom-column-footer"><button class="btn btn-primary btn-lg">Click here</button></div>
      </div>
    </div>
    <div class="col-sm-12 col-md-4">
      <div class="custom-column">        
        <div class="custom-column-header">Header</div>
        <div class="custom-column-content">
          <ul class="list-group">
            <li class="list-group-item"><i class="fa fa-check"></i> Cras justo odio</li>
            <li class="list-group-item"><i class="fa fa-check"></i> Dapibus ac facilisis in</li>
            <li class="list-group-item"><i class="fa fa-check"></i> Morbi leo risus</li>
            <li class="list-group-item"><i class="fa fa-check"></i> Porta ac consectetur ac</li>
            <li class="list-group-item"><i class="fa fa-check"></i> Vestibulum at eros</li>
          </ul>
        </div>
        <div class="custom-column-footer"><button class="btn btn-primary btn-lg">Click here</button></div>
      </div>
    </div>
    <div class="col-sm-12 col-md-4">
      <div class="custom-column">
        <div class="custom-column-header">Header</div>
        <div class="custom-column-content">
          <ul class="list-group">
            <li class="list-group-item"><i class="fa fa-check"></i> Cras justo odio</li>
            <li class="list-group-item"><i class="fa fa-check"></i> Dapibus ac facilisis in</li>
            <li class="list-group-item"><i class="fa fa-check"></i> Morbi leo risus</li>
            <li class="list-group-item"><i class="fa fa-check"></i> Porta ac consectetur ac</li>
            <li class="list-group-item"><i class="fa fa-check"></i> Vestibulum at eros</li>
          </ul>
        </div>
        <div class="custom-column-footer"><button class="btn btn-primary btn-lg">Click here</button></div>
      </div>
    </div>
  </div>
</div>

CSS/SCSS

$primary-color: #ccc;
$col-bg-color: #eee;
$col-footer-bg-color: #eee;
$col-header-bg-color: #007bff;
$col-content-bg-color: #fff;

body {
  background-color: $primary-color;
}  

.custom-column {  
  background-color: $col-bg-color;
  border: 5px solid $col-bg-color;    
  padding: 10px;
  box-sizing: border-box;  
}

.custom-column-header {
  font-size: 24px;
  background-color: #007bff;  
  color: white;
  padding: 15px;  
  text-align: center;
}

.custom-column-content {
  background-color: $col-content-bg-color;
  border: 2px solid white;  
  padding: 20px;  
}

.custom-column-footer {
  background-color: $col-footer-bg-color;   
  padding-top: 20px;
  text-align: center;
}

Link: - https://codepen.io/anjanasilva/pen/JmdOpb

4
Anjana Silva

Wenn Sie Sass verwenden:

$card-column-sizes: (
    xs: 2,
    sm: 3,
    md: 4,
    lg: 5,
);

@each $breakpoint-size, $column-count in $card-column-sizes {
    @include media-breakpoint-up($breakpoint-size) {
      .card-columns {
        column-count: $column-count;
        column-gap: 1.25rem;

        .card {
          display: inline-block;
          width: 100%; // Don't let them exceed the column width
        }
      }
    }
}
2
safrazik

Mir ist klar, dass diese Frage vor einiger Zeit gestellt wurde. Dennoch unterstützt Bootstrap v4.0 das Kartenlayout von Anfang an. Die Dokumentation finden Sie hier: Bootstrap-Kartenlayouts .

Ich habe mich wieder daran gemacht, Bootstrap für ein kürzlich durchgeführtes Projekt zu verwenden, das sich stark auf die Benutzeroberfläche für das Kartenlayout stützt. Ich habe Erfolg mit der folgenden Implementierung über die Standard-Haltepunkte hinweg gefunden:

<link href="https://unpkg.com/[email protected]/css/tachyons.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="flex justify-center" id="cars" v-cloak>
    <!-- RELEVANT MARKUP BEGINS HERE -->
    <div class="container mh0 w-100">
        <div class="page-header text-center mb5">
            <h1 class="avenir text-primary mb-0">Cars</h1>
            <p class="text-secondary">Add and manage your cars for sale.</p>
            <div class="header-button">
                <button class="btn btn-outline-primary" @click="clickOpenAddCarModalButton">Add a car for sale</button>
            </div>
        </div>
        <div class="container pa0 flex justify-center">
            <div class="listings card-columns">
                <div class="card mv2">
                    <img src="https://farm4.staticflickr.com/3441/3361756632_8d84aa8560.jpg" class="card-img-top"
                        alt="Mazda hatchback">
                    <div class="card-body">
                        <h5 class="card-title">Card title</h5>
                        <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="btn btn-primary">Go somewhere</a>
                    </div>
                    <div class="card-footer">
                        buttons here
                    </div>
                </div>
                <div class="card mv2">
                    <img src="https://farm4.staticflickr.com/3441/3361756632_8d84aa8560.jpg" class="card-img-top"
                        alt="Mazda hatchback">
                    <div class="card-body">
                        <h5 class="card-title">Card title</h5>
                        <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="btn btn-primary">Go somewhere</a>
                    </div>
                    <div class="card-footer">
                        buttons here
                    </div>
                </div>
                <div class="card mv2">
                    <img src="https://farm4.staticflickr.com/3441/3361756632_8d84aa8560.jpg" class="card-img-top"
                        alt="Mazda hatchback">
                    <div class="card-body">
                        <h5 class="card-title">Card title</h5>
                        <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="btn btn-primary">Go somewhere</a>
                    </div>
                    <div class="card-footer">
                        buttons here
                    </div>
                </div>
                <div class="card mv2">
                    <img src="https://farm4.staticflickr.com/3441/3361756632_8d84aa8560.jpg" class="card-img-top"
                        alt="Mazda hatchback">
                    <div class="card-body">
                        <h5 class="card-title">Card title</h5>
                        <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="btn btn-primary">Go somewhere</a>
                    </div>
                    <div class="card-footer">
                        buttons here
                    </div>
                </div>
                <div class="card mv2">
                    <img src="https://farm4.staticflickr.com/3441/3361756632_8d84aa8560.jpg" class="card-img-top"
                        alt="Mazda hatchback">
                    <div class="card-body">
                        <h5 class="card-title">Card title</h5>
                        <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="btn btn-primary">Go somewhere</a>
                    </div>
                    <div class="card-footer">
                        buttons here
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Nachdem Sie beide Bootstrap .card-group und .card-deck Kartenlayoutklassen mit bestenfalls skurrilen Ergebnissen über die Standard-Breakpoints hinweg, entschied ich mich schließlich, die .card-columns Klasse ein Schuss. Und es hat funktioniert!

Ihre Ergebnisse können variieren, aber .card-columns scheint hier die stabilste Implementierung zu sein.

1
buildpax