diff options
| author | Mark Otto <[email protected]> | 2016-10-27 09:41:33 -0700 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2016-10-27 09:41:33 -0700 |
| commit | e2068d0e53ef63acc1e0c1ef8b974e8c7154bf76 (patch) | |
| tree | 7cc73975d9cd2c9d92730c2417e7f79ee39ba580 /docs | |
| parent | 5b266437e76db8b34ac601ded2b0e276a883e700 (diff) | |
| parent | 4538ac9b56e6390b4b4ca745dc749195859cb8f3 (diff) | |
| download | bootstrap-e2068d0e53ef63acc1e0c1ef8b974e8c7154bf76.tar.xz bootstrap-e2068d0e53ef63acc1e0c1ef8b974e8c7154bf76.zip | |
Merge branch 'auto-flex-col' of https://github.com/alanmoo/bootstrap into alanmoo-auto-flex-col
Diffstat (limited to 'docs')
| -rw-r--r-- | docs/layout/flexbox-grid.md | 31 |
1 files changed, 31 insertions, 0 deletions
diff --git a/docs/layout/flexbox-grid.md b/docs/layout/flexbox-grid.md index 4f456e273..4412466f6 100644 --- a/docs/layout/flexbox-grid.md +++ b/docs/layout/flexbox-grid.md @@ -92,6 +92,37 @@ Auto-layout for flexbox grid columns also means you can set the width of one col {% endexample %} </div> +Sometimes it's useful to have a column that lays itself out based on the natural width of its content, especially single line content like inputs, numbers, etc. Using the `col-{breakpoint}-auto` classes, you can guide this behavior as desired. This, in conjunction with [horizontal alignment](#horizontal-alignment) classes, is very useful for centering layouts with uneven column sizes as viewport width grows. + +<div class="bd-example-row"> +{% example html %} +<div class="container"> + <div class="row flex-items-md-center"> + <div class="col-xs col-lg-2"> + 1 of 3 + </div> + <div class="col-xs-12 col-md-auto"> + Variable width content + </div> + <div class="col-xs col-lg-2"> + 3 of 3 + </div> + </div> + <div class="row"> + <div class="col-xs"> + 1 of 3 + </div> + <div class="col-xs-12 col-md-auto"> + Variable width content + </div> + <div class="col-xs col-lg-2"> + 3 of 3 + </div> + </div> +</div> +{% endexample %} +</div> + ## Responsive flexbox Unlike the default grid system, the flexbox grid requires a class for full-width columns. If you have a `.col-sm-6` and don't add `.col-xs-12`, your `xs` grid will not render correctly. Note that flexbox grid tiers still scale up across breakpoints, so if you want two 50% wide columns across `sm`, `md`, and `lg`, you only need to set `.col-sm-6`. |