65

私は Bootstrap 4 で遊んでいますが、divwith でカードに応答性を追加する解決策が見つかりませんclass="card-columns"(このクラスは、このクラスを持つ div 内のカードに Masonry のような効果を適用します)。

Bootstrap 3 では、、 などを含む divに適用できるため、スタイルを設定して「カード」をレスポンシブにするのは簡単でした。class="col-md-3 col-sm-6 col-xs-12"thumbnailcaption

Bootstrap 4 でカードを使用しているときに同じ効果を得るにはどうすればよいですか?

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>

そして、これが私が使用したCSSです：

#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;
}

以下に、私の状況を明確にするための2つの画像を示します。

大画面

小さい画面

小さい画面でカードを縦に重ねて表示したいです。

ご提案いただきありがとうございます。

4

6 に答える 6

69

Bootstrap 4 (4.0.0-alpha.2) はcolumn-count、クラスの css プロパティを使用して、要素 card-columns内に表示されるカードの列数を定義します。 ただし、このプロパティには次の 2 つの値しかありません。 div

  • 小さい画面のデフォルト値1max-width: 34em ( )
  • 他のすべてのサイズの値3min-width: 34em ( )

これがbootstrap.min.cssでどのように実装されているかを次に示します。

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

カード スタッキングをレスポンシブにするには、次のメディア クエリをcssファイルに追加しmin-width、要件に従って値を変更します。

@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;
    }
}
于 2016-01-16T20:28:36.567 に答える
3

Sass を使用している場合:

$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
        }
      }
    }
}
于 2016-03-22T13:28:28.110 に答える