Карты разных размеров в Bootstrap 4 card-group

можно ли смешивать карты разных размеров в группе карт в Bootstrap 4. Я хочу иметь большую карту (двойная ширина) на левом размере и две меньшие карты справа, с одинаковой высотой всех трех.

<div class="container">
  <div class="row">
    <div class="card-group">
        <div class="card col-md-6">
          <div class="card-block">
            <h4 class="card-title">Card 1</h4>
            <p class="card-text">Text 1</p>
          </div>
        </div>
         <div class="card col-md-3">
          <div class="card-block">
            <h4 class="card-title">Card 2</h4>
            <p class="card-text">Text 2</p>
            <p class="card-text">More text 2</p>
            <p class="card-text">More text 2</p>
          </div>
        </div>
        <div class="card col-md-3">
          <div class="card-block">
            <h4 class="card-title">Card 3</h4>
            <p class="card-text">Text 3</p>
          </div>
        </div>
      </div>
    </div>
  </div>
6
bootstrap-4 twitter-bootstrap twitter-bootstrap-4

3 ответов

Я думаю, что намерение состоит в том, что группы карт равны ширине и высоте (http://v4-alpha.getbootstrap.com/components/card/#groups), но вы можете переопределить поведение начальной загрузки по умолчанию, чтобы заставить его работать так..

.card-group [class*='col-'] {
  float:none;
}

http://codeply.com/go/4WVwRBTyTP

Примечание: подстановочные CSS селекторы, как это медленно. Было бы лучше добавить специальный класс CSS для переопределения Bootstrap float:left поведение столбцам card-group

обновление

теперь, когда BS4 имеет flexbox, дополнительный CSS больше не требуется. Просто сделайте card-group и row тот же div, а затем использовать col-* как обычно, чтобы задать ширину. Однако, используя card-group предотвратит отзывчивую обертку столбца.

http://www.codeply.com/go/jzIcjyg6Xa

7

документация Bootstrap v4-Beta2 для макет карты в настоящее время гласит:

времени эти параметры макета еще не реагируют.

однако,ZimSystem это указал, группы карт теперь flexbox. Таким образом можно также переопределить flex-grow стиль для установки относительных размеров карт.

<div class="card-group">
    <div class="card" style="flex-grow: 2">
        <div class="card-block">
            <h4 class="card-title">Card 1</h4>
            <p class="card-text">Text 1</p>
        </div>
    </div>
    <div class="card">
        <div class="card-block">
            <h4 class="card-title">Card 2</h4>
            <p class="card-text">Text 2</p>
            <p class="card-text">More text 2</p>
            <p class="card-text">More text 2</p>
        </div>
    </div>
    <div class="card">
        <div class="card-block">
            <h4 class="card-title">Card 3</h4>
            <p class="card-text">Text 3</p>
        </div>
    </div>
</div>

Codeply

2

см. также https://stackoverflow.com/a/35627731/1596547, Как уже объяснил @Skelly предопределенные классы сетки (col-md-*) не только установить width также a float.

вместо использования классов сетки вы также можете применить width напрямую:

    <div class="card-group">
        <div class="card" style="width:50%;">
          <div class="card-block">
            <h4 class="card-title">Card 1</h4>
            <p class="card-text">Text 1</p>
          </div>
        </div>
         <div class="card">
          <div class="card-block">
            <h4 class="card-title">Card 2</h4>
            <p class="card-text">Text 2</p>
            <p class="card-text">More text 2</p>
            <p class="card-text">More text 2</p>
          </div>
        </div>
        <div class="card">
          <div class="card-block">
            <h4 class="card-title">Card 3</h4>
            <p class="card-text">Text 3</p>
          </div>
        </div>
      </div>
-1