root
/
bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Issues Actions 2 Packages Projects Releases Wiki Activity

final docs cleanup with columns and more

This commit is contained in:
Mark Otto 2016-12-22 16:47:30 -08:00
parent ce35655f5f
commit bc69ff108a
1 changed files with 21 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
docs/components/card.md
View File

@ -596,10 +596,8 @@ Need a set of equal width and height cards that aren't attached to one another?
</div> </div>
{% endexample %} {% endexample %}
## Columns
Just like with card groups, card footers in decks will automatically line up. Just like with card groups, card footers in decks will automatically line up.
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`.
{% example html %} {% example html %}
<div class="card-deck"> <div class="card-deck">
<div class="card"> <div class="card">
@ -635,7 +633,11 @@ Cards can be organized into [Masonry](http://masonry.desandro.com)-like columns
</div> </div>
{% endexample %} {% endexample %}
Only applies to small devices and above. ### 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 built with CSS `column` properties instead of flexbox for easier alignment. Cards are ordered from top to bottom and left to right.
**Heads up!** Your mileage with card columns may vary. To prevent cards breaking across columns, we must set them to `display: inline-block` as `column-break-inside: avoid` isn't a bulletproof solution yet.
{% example html %} {% example html %}
<div class="card-columns"> <div class="card-columns">
@ -646,8 +648,8 @@ Only applies to small devices and above.
<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> <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>
<div class="card card-block"> <div class="card p-3">
<blockquote class="card-blockquote"> <blockquote class="card-block card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer> <footer>
<small class="text-muted"> <small class="text-muted">
@ -664,7 +666,7 @@ Only applies to small devices and above.
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div> </div>
</div> </div>
<div class="card card-block card-inverse card-primary text-center"> <div class="card card-inverse card-primary p-3 text-center">
<blockquote class="card-blockquote"> <blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
<footer> <footer>
@ -674,15 +676,17 @@ Only applies to small devices and above.
</footer> </footer>
</blockquote> </blockquote>
</div> </div>
<div class="card card-block text-center"> <div class="card text-center">
<h4 class="card-title">Card title</h4> <div class="card-block">
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p> <h4 class="card-title">Card title</h4>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div> </div>
<div class="card"> <div class="card">
<img class="card-img img-fluid" data-src="holder.js/100px260/" alt="Card image"> <img class="card-img img-fluid" data-src="holder.js/100px260/" alt="Card image">
</div> </div>
<div class="card card-block text-right"> <div class="card p-3 text-right">
<blockquote class="card-blockquote"> <blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer> <footer>
@ -692,10 +696,12 @@ Only applies to small devices and above.
</footer> </footer>
</blockquote> </blockquote>
</div> </div>
<div class="card card-block"> <div class="card">
<h4 class="card-title">Card title</h4> <div class="card-block">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p> <h4 class="card-title">Card title</h4>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div> </div>
</div> </div>
{% endexample %} {% endexample %}