Fixes #17486: start work on responsive cards for decks, groups, and columns
This commit is contained in:
Mark Otto
parent
8f16abb669
commit
741f7d4b5a
|
|
@ -112,7 +112,7 @@ Using the grid:
|
|||
Using custom widths:
|
||||
|
||||
{% 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>
|
||||
<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>
|
||||
|
|
@ -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.
|
||||
|
||||
Only applies to small devices and above.
|
||||
|
||||
{% example html %}
|
||||
<div class="card-group">
|
||||
<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`.
|
||||
|
||||
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`.
|
||||
|
||||
{% example html %}
|
||||
|
|
@ -363,7 +367,7 @@ Need a set of equal width and height cards that aren't attached to one another?
|
|||
|
||||
## 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).
|
||||
|
||||
|
|
|
|||
142
scss/_card.scss
142
scss/_card.scss
|
|
@ -181,33 +181,37 @@
|
|||
//
|
||||
|
||||
@if $enable-flex {
|
||||
.card-deck {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
margin-right: -.625rem;
|
||||
margin-left: -.625rem;
|
||||
@include media-breakpoint-up(sm) {
|
||||
.card-deck {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
margin-right: -.625rem;
|
||||
margin-left: -.625rem;
|
||||
|
||||
.card {
|
||||
flex: 1 0 0;
|
||||
margin-right: .625rem;
|
||||
margin-left: .625rem;
|
||||
.card {
|
||||
flex: 1 0 0;
|
||||
margin-right: .625rem;
|
||||
margin-left: .625rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
} @else {
|
||||
.card-deck {
|
||||
display: table;
|
||||
table-layout: fixed;
|
||||
border-spacing: 1.25rem 0;
|
||||
@include media-breakpoint-up(sm) {
|
||||
.card-deck {
|
||||
display: table;
|
||||
table-layout: fixed;
|
||||
border-spacing: 1.25rem 0;
|
||||
|
||||
.card {
|
||||
display: table-cell;
|
||||
width: 1%;
|
||||
vertical-align: top;
|
||||
.card {
|
||||
display: table-cell;
|
||||
width: 1%;
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
.card-deck-wrapper {
|
||||
margin-right: -1.25rem;
|
||||
margin-left: -1.25rem;
|
||||
}
|
||||
}
|
||||
.card-deck-wrapper {
|
||||
margin-right: -1.25rem;
|
||||
margin-left: -1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -215,54 +219,56 @@
|
|||
// Card groups
|
||||
//
|
||||
|
||||
.card-group {
|
||||
@if $enable-flex {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
} @else {
|
||||
display: table;
|
||||
width: 100%;
|
||||
table-layout: fixed;
|
||||
}
|
||||
|
||||
.card {
|
||||
@include media-breakpoint-up(sm) {
|
||||
.card-group {
|
||||
@if $enable-flex {
|
||||
flex: 1 0 0;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
} @else {
|
||||
display: table-cell;
|
||||
vertical-align: top;
|
||||
display: table;
|
||||
width: 100%;
|
||||
table-layout: fixed;
|
||||
}
|
||||
|
||||
+ .card {
|
||||
margin-left: 0;
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
// Handle rounded corners
|
||||
@if $enable-rounded {
|
||||
&:first-child {
|
||||
.card-img-top {
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
.card-img-bottom {
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
.card-img-top {
|
||||
border-top-left-radius: 0;
|
||||
}
|
||||
.card-img-bottom {
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
.card {
|
||||
@if $enable-flex {
|
||||
flex: 1 0 0;
|
||||
} @else {
|
||||
display: table-cell;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
&:not(:first-child):not(:last-child) {
|
||||
border-radius: 0;
|
||||
+ .card {
|
||||
margin-left: 0;
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
.card-img-top,
|
||||
.card-img-bottom {
|
||||
// Handle rounded corners
|
||||
@if $enable-rounded {
|
||||
&:first-child {
|
||||
.card-img-top {
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
.card-img-bottom {
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
.card-img-top {
|
||||
border-top-left-radius: 0;
|
||||
}
|
||||
.card-img-bottom {
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(:first-child):not(:last-child) {
|
||||
border-radius: 0;
|
||||
|
||||
.card-img-top,
|
||||
.card-img-bottom {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -274,12 +280,14 @@
|
|||
// Card
|
||||
//
|
||||
|
||||
.card-columns {
|
||||
column-count: 3;
|
||||
column-gap: 1.25rem;
|
||||
@include media-breakpoint-up(sm) {
|
||||
.card-columns {
|
||||
column-count: 3;
|
||||
column-gap: 1.25rem;
|
||||
|
||||
.card {
|
||||
display: inline-block;
|
||||
width: 100%; // Don't let them exceed the column width
|
||||
.card {
|
||||
display: inline-block;
|
||||
width: 100%; // Don't let them exceed the column width
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue