rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-01 13:24:25 +01:00
Code Issues Actions Packages Releases Activity

Fix #17511 by adding mention to the docs for how to extend the card columns

Browse Source
This commit is contained in:
Mark Otto 2016-05-11 23:13:52 -07:00
parent 56a5b19cdb
commit e70f7162ec
1 changed files with 14 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
docs/components/card.md
View File

@ -508,7 +508,7 @@ Only applies to small devices and above.
## Columns
Cards can be organized into [Masonry](http://masonry.desandro.com)-like columns with just CSS by wrapping them in `.card-columns`. Cards are ordered from top to bottom and left to right when wrapped in `.card-columns`.
Cards can be organized into [Masonry](http://masonry.desandro.com)-like columns with just CSS by wrapping them in `.card-columns`. Cards are ordered from top to bottom and left to right when wrapped in `.card-columns`.
Only applies to small devices and above.
@ -576,3 +576,16 @@ Only applies to small devices and above.
</div>
</div>
{% endexample %}
Card columns can also be extended and customized with some additional code. Shown below is an extension of the `.card-columns` class using the same CSS we use—CSS columns— to generate a set of responsive tiers for changing the number of columns.
{% highlight scss %}
.card-columns {
@include media-breakpoint-only(lg) {
column-count: 4;
}
@include media-breakpoint-only(xl) {
column-count: 5;
}
}
{% endhighlight %}