Bootstrap 4 - Адаптивные карты в карточных столбцах

Я играю с Bootstrap 4, и я не могу найти решение, чтобы добавить отзывчивость к картам, а в div с class="card-columns" (этот класс применяет эффект масонства к картам внутри div, имеющий этот класс).

В Bootstrap 3 было легко стилизовать и сделать "карты" отзывчивыми, так как было возможно применить что-то вроде class="col-md-3 col-sm-6 col-xs-12" к div, содержащему thumbnail, caption и т.д.

Как получить тот же эффект при использовании карт в 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 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;
}

Ниже приведены два изображения, чтобы сделать мою ситуацию более ясной:

Большой экран

Меньший экран

Я бы хотел, чтобы карты располагались вертикально на меньших экранах.

Спасибо за ваши предложения!

Ответы

Ответ 1

Bootstrap 4 (4.0.0-alpha.2) использует свойство css column-count в классе card-columns, чтобы определить, сколько столбцов карт будет отображаться внутри элемента div.
Но это свойство имеет только два значения:

  • Значение по умолчанию 1 для небольших экранов (max-width: 34em)
  • Значение 3 для всех других размеров (min-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;
    }
}

Ответ 2

Обновление 2018 - Bootstrap 4

Вы можете просто использовать миксин SASS, чтобы изменить количество карт в каждом уровне точки останова/сетки.

.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: http://www.codeply.com/go/FPBCQ7sOjX

Или CSS только так...

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

Демо-версия только для CSS: https://www.codeply.com/go/FIqYTyyWWZ

Ответ 3

Я создал макет карт - 3 карты подряд, используя Bootstrap 4/CSS3 (конечно, он адаптивный). В следующем примере используются базовые классы Bootstrap 4, такие как container, row, col-x, list-group и list-group-item. Мысль, чтобы поделиться здесь, если кто-то заинтересован в такого рода макете.

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

Ссылка: - https://codepen.io/anjanasilva/pen/JmdOpb

Ответ 4

Если вы используете 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
        }
      }
    }
}

Ответ 5

Я понимаю, что этот вопрос был опубликован некоторое время назад; тем не менее, Bootstrap v4.0 имеет встроенную поддержку раскладки карт. Вы можете найти документацию здесь: Схемы загрузочных карт.

Я вернулся к использованию Bootstrap для недавнего проекта, который сильно зависит от пользовательского интерфейса макета карты. Я нашел успех со следующей реализацией через стандартные точки останова:

<link href="#" onclick="location.href='https://unpkg.com/