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

First pass at .row-cols classes

Browse Source 
Trying to find a new way to do responsive card decks while not locking ourselves into the cards themselves. My thinking here is we can easily control the column (.col) width by the parent, but I don't know how many we need (have 0-5 now) across each breakpoint. This works for cards so far, and I think could get us equal height, too.
This commit is contained in:
Mark Otto 2019-07-18 02:27:53 +03:00 committed by Mark Otto
parent 4041d70eb5
commit e2252e0230
3 changed files with 144 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
scss/_card.scss
View File

@ -175,6 +175,18 @@
}
}
$row-columns: 6 !default;
@each $breakpoint in map-keys($grid-breakpoints) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
@for $i from 1 through $row-columns {
.row-cols#{$infix}-#{$i} > [class^="col"] {
flex: 0 0 calc(100% / #{$i});
}
}
}
//
// Card groups

88
site/content/docs/4.3/components/card.md
View File

@ -601,6 +601,92 @@ Just like with card groups, card footers in decks will automatically line up.
</div>
{{< /example >}}
### Card columns (Masonry layout)
### Grid cards
Use the Bootstrap grid system and its [`.rol-cols` classes]() to control how many grid columns (wrapped around your cards) you show per row.
{{< example >}}
<div class="row row-cols-2">
<div class="col">
<div class="card mb-4">
{{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}}
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col">
<div class="card mb-4">
{{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}}
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col">
<div class="card mb-4">
{{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}}
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col">
<div class="card mb-4">
{{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}}
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
</div>
{{< /example >}}
{{< example >}}
<div class="row row-cols-3">
<div class="col">
<div class="card mb-4">
{{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}}
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col">
<div class="card mb-4">
{{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}}
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col">
<div class="card mb-4">
{{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}}
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col">
<div class="card mb-4">
{{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}}
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
</div>
{{< /example >}}
### Masonry
In `v4` we used a CSS-only technique to mimic the behavior of [Masonry](https://masonry.desandro.com/)-like columns, but this technique came with lots of unpleasant [side effects](https://github.com/twbs/bootstrap/pull/28922). If you want to have this type of layout in `v5`, you can just make use of Masonry plugin. **Masonry is not included in Bootstrap**, but we've made a [demo example]({{< docsref "/examples/masonry" >}}) to help you get started.

45
site/content/docs/4.3/layout/grid.md
View File

@ -324,6 +324,51 @@ Here's an example of customizing the Bootstrap grid at the large (`lg`) breakpoi
</div>
{{< /example >}}
### Row columns
Use the responsive `.row-cols-*` classes to quickly set the number of columns that best render your content and layout. Whereas normal `.col-*` classes apply to the individual columns (e.g., `.col-md-4`), the row columns classes are set on the parent `.row` as a shortcut.
Use these row columns classes to quickly create basic grid layouts or to control your card layouts.
<div class="bd-example-row">
{{< example >}}
<div class="container">
<div class="row row-cols-2">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
{{< /example >}}
</div>
<div class="bd-example-row">
{{< example >}}
<div class="container">
<div class="row row-cols-3">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
{{< /example >}}
</div>
<div class="bd-example-row">
{{< example >}}
<div class="container">
<div class="row row-cols-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
{{< /example >}}
</div>
## Alignment
Use flexbox alignment utilities to vertically and horizontally align columns. **Internet Explorer 10-11 do not support vertical alignment of flex items when the flex container has a `min-height` as shown below.** [See Flexbugs #3 for more details.](https://github.com/philipwalton/flexbugs#flexbug-3)