From f793853609ad0d292ba6291a8c87c66fd659a560 Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Fri, 25 Apr 2014 11:39:42 -0700 Subject: document grid column wrapping behavior; fixes #13247 --- docs/_includes/css/grid.html | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) (limited to 'docs/_includes/css/grid.html') diff --git a/docs/_includes/css/grid.html b/docs/_includes/css/grid.html index 992612e85..0deb12458 100644 --- a/docs/_includes/css/grid.html +++ b/docs/_includes/css/grid.html @@ -13,6 +13,7 @@
  • Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on .rows.
  • The negative margin is why the examples below are outdented. It's so that content within grid columns is lined up with non-grid content.
  • Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three .col-xs-4.
    • +
  • If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.
  • Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, applying any .col-md- class to an element will not only affect its styling on medium devices but also on large devices if a .col-lg- class is not present.

    • Look to the examples for applying these principles to your code.

    @@ -252,6 +253,23 @@
    .col-xs-6 .col-sm-4
    +{% endhighlight %} + +

    Example: Column wrapping

    +

    If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.

    +
    +
    +
    .col-xs-9
    +
    .col-xs-4
    Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.
    +
    .col-xs-6
    Subsequent columns continue along the new line.
    +
    +
    +{% highlight html %} +
    +
    .col-xs-9
    +
    .col-xs-4
    Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.
    +
    .col-xs-6
    Subsequent columns continue along the new line.
    +
    {% endhighlight %}

    Responsive column resets

    -- cgit v1.2.3 From dcbe484a09531da4ecc80fd2991a9910fb6a64ed Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 10 Jun 2014 21:20:34 -0700 Subject: New text align class, .text-nowrap, for preventing text from breaking to new lines. Applies it to the grid docs table. --- docs/_includes/css/grid.html | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) (limited to 'docs/_includes/css/grid.html') diff --git a/docs/_includes/css/grid.html b/docs/_includes/css/grid.html index 0deb12458..593b02a43 100644 --- a/docs/_includes/css/grid.html +++ b/docs/_includes/css/grid.html @@ -68,49 +68,49 @@ - Grid behavior + Grid behavior Horizontal at all times Collapsed to start, horizontal above breakpoints - Container width + Container width None (auto) 750px 970px 1170px - Class prefix + Class prefix .col-xs- .col-sm- .col-md- .col-lg- - # of columns + # of columns 12 - Column width + Column width Auto ~62px ~81px ~97px - Gutter width + Gutter width 30px (15px on each side of a column) - Nestable + Nestable Yes - Offsets + Offsets Yes - Column ordering + Column ordering Yes -- cgit v1.2.3 From 5c6c0a194d61f8fb8ffca94bc5e695a7dda87fd7 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 10 Jun 2014 21:24:44 -0700 Subject: fixes #13775: tweak grid nesting docs about # of cols, change up example slightly --- docs/_includes/css/grid.html | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) (limited to 'docs/_includes/css/grid.html') diff --git a/docs/_includes/css/grid.html b/docs/_includes/css/grid.html index 593b02a43..8ff53dd71 100644 --- a/docs/_includes/css/grid.html +++ b/docs/_includes/css/grid.html @@ -347,30 +347,30 @@

    Nesting columns

    -

    To nest your content with the default grid, add a new .row and set of .col-md-* columns within an existing .col-md-* column. Nested rows should include a set of columns that add up to 12 or less.

    +

    To nest your content with the default grid, add a new .row and set of .col-md-* columns within an existing .col-md-* column. Nested rows should include a set of columns that add up to 12 or less (it is not required that you use all 12 available columns).

    -
    +
    Level 1: .col-md-9
    -
    - Level 2: .col-md-6 +
    + Level 2: .col-xs-8 .col-md-6
    -
    - Level 2: .col-md-6 +
    + Level 2: .col-xs-4 .col-md-6
    {% highlight html %}
    -
    +
    Level 1: .col-md-9
    -
    - Level 2: .col-md-6 +
    + Level 2: .col-xs-8 .col-md-6
    -
    - Level 2: .col-md-6 +
    + Level 2: .col-xs-4 .col-md-6
    -- cgit v1.2.3 From 32bde78e1996a92e6b801e1f4a475d5ab48685f8 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 23 Jun 2014 10:41:45 -0700 Subject: grid class inconsistency /cc @juthilo --- docs/_includes/css/grid.html | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) (limited to 'docs/_includes/css/grid.html') diff --git a/docs/_includes/css/grid.html b/docs/_includes/css/grid.html index 8ff53dd71..f1ee7fcd1 100644 --- a/docs/_includes/css/grid.html +++ b/docs/_includes/css/grid.html @@ -353,10 +353,10 @@ Level 1: .col-md-9
    - Level 2: .col-xs-8 .col-md-6 + Level 2: .col-xs-8 .col-sm-6
    - Level 2: .col-xs-4 .col-md-6 + Level 2: .col-xs-4 .col-sm-6
    @@ -364,13 +364,13 @@ {% highlight html %}
    - Level 1: .col-md-9 + Level 1: .col-sm-9
    - Level 2: .col-xs-8 .col-md-6 + Level 2: .col-xs-8 .col-sm-6
    - Level 2: .col-xs-4 .col-md-6 + Level 2: .col-xs-4 .col-sm-6
    -- cgit v1.2.3 From 25b06d927fa8fb056b3b146db263498a34401fb8 Mon Sep 17 00:00:00 2001 From: Julian Thilo Date: Mon, 23 Jun 2014 23:36:18 +0200 Subject: grid class inconsistency 2 https://github.com/twbs/bootstrap/commit/32bde78e1996a92e6b801e1f4a475d5ab48685f8 --- docs/_includes/css/grid.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'docs/_includes/css/grid.html') diff --git a/docs/_includes/css/grid.html b/docs/_includes/css/grid.html index f1ee7fcd1..429ef90f9 100644 --- a/docs/_includes/css/grid.html +++ b/docs/_includes/css/grid.html @@ -347,10 +347,10 @@

    Nesting columns

    -

    To nest your content with the default grid, add a new .row and set of .col-md-* columns within an existing .col-md-* column. Nested rows should include a set of columns that add up to 12 or less (it is not required that you use all 12 available columns).

    +

    To nest your content with the default grid, add a new .row and set of .col-sm-* columns within an existing .col-sm-* column. Nested rows should include a set of columns that add up to 12 or less (it is not required that you use all 12 available columns).

    - Level 1: .col-md-9 + Level 1: .col-sm-9
    Level 2: .col-xs-8 .col-sm-6 -- cgit v1.2.3