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

Fixes #17486: start work on responsive cards for decks, groups, and columns

Browse Source
This commit is contained in:
Mark Otto 2015-09-06 09:36:19 -07:00
parent 8f16abb669
commit 741f7d4b5a
2 changed files with 81 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
docs/components/card.md
View File

@ -112,7 +112,7 @@ Using the grid:
Using custom widths: Using custom widths:
{% example html %} {% example html %}
<div class="card card-block" style="width: 20rem;"> <div class="card card-block" style="width: 18rem;">
<h3 class="card-title">Special title treatment</h3> <h3 class="card-title">Special title treatment</h3>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a> <a href="#" class="btn btn-primary">Go somewhere</a>
@ -295,6 +295,8 @@ Cards include their own variant classes for quickly changing the `background-col
Use card groups to render cards as a single, attached element with equal width and height columns. By default, card groups use `display: table;` and `table-layout: fixed;` to achieve their uniform sizing. However, enabling [flexbox mode]({{ site.baseurl }}/getting-started/flexbox) can switch that to use `display: flex;` and provide the same effect. Use card groups to render cards as a single, attached element with equal width and height columns. By default, card groups use `display: table;` and `table-layout: fixed;` to achieve their uniform sizing. However, enabling [flexbox mode]({{ site.baseurl }}/getting-started/flexbox) can switch that to use `display: flex;` and provide the same effect.
Only applies to small devices and above.
{% example html %} {% example html %}
<div class="card-group"> <div class="card-group">
<div class="card"> <div class="card">
@ -328,6 +330,8 @@ Use card groups to render cards as a single, attached element with equal width a
Need a set of equal width and height cards that aren't attached to one another? Use card decks. By default, card decks require two wrapping elements: `.card-deck-wrapper` and a `.card-deck`. We use table styles for the sizing and the gutters on `.card-deck`. The `.card-deck-wrapper` is used to negative margin out the `border-spacing` on the `.card-deck`. Need a set of equal width and height cards that aren't attached to one another? Use card decks. By default, card decks require two wrapping elements: `.card-deck-wrapper` and a `.card-deck`. We use table styles for the sizing and the gutters on `.card-deck`. The `.card-deck-wrapper` is used to negative margin out the `border-spacing` on the `.card-deck`.
Only applies to small devices and above.
**ProTip!** If you enable [flexbox mode]({{ site.baseurl }}/getting-started/flexbox/), you can remove the `.card-deck-wrapper`. **ProTip!** If you enable [flexbox mode]({{ site.baseurl }}/getting-started/flexbox/), you can remove the `.card-deck-wrapper`.
{% example html %} {% example html %}
@ -363,7 +367,7 @@ Need a set of equal width and height cards that aren't attached to one another?
## Columns ## Columns
Cards can be organized into [Masonry](http://masonry.desandro.com)-like columns with just CSS by wrapping them in `.card-columns`. Cards can be organized into [Masonry](http://masonry.desandro.com)-like columns with just CSS by wrapping them in `.card-columns`. Only applies to small devices and above.
**Heads up!** This is **not available in IE9 and below** as they have no support for the [`column-*` CSS properties](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_multi-column_layouts). **Heads up!** This is **not available in IE9 and below** as they have no support for the [`column-*` CSS properties](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_multi-column_layouts).

8
scss/_card.scss
View File

@ -181,6 +181,7 @@
// //
@if $enable-flex { @if $enable-flex {
@include media-breakpoint-up(sm) {
.card-deck { .card-deck {
display: flex; display: flex;
flex-flow: row wrap; flex-flow: row wrap;
@ -193,7 +194,9 @@
margin-left: .625rem; margin-left: .625rem;
} }
} }
}
} @else { } @else {
@include media-breakpoint-up(sm) {
.card-deck { .card-deck {
display: table; display: table;
table-layout: fixed; table-layout: fixed;
@ -210,11 +213,13 @@
margin-left: -1.25rem; margin-left: -1.25rem;
} }
} }
}
// //
// Card groups // Card groups
// //
@include media-breakpoint-up(sm) {
.card-group { .card-group {
@if $enable-flex { @if $enable-flex {
display: flex; display: flex;
@ -268,12 +273,14 @@
} }
} }
} }
}
// //
// Card // Card
// //
@include media-breakpoint-up(sm) {
.card-columns { .card-columns {
column-count: 3; column-count: 3;
column-gap: 1.25rem; column-gap: 1.25rem;
@ -283,3 +290,4 @@
width: 100%; // Don't let them exceed the column width width: 100%; // Don't let them exceed the column width
} }
} }
}