mirror of
https://github.com/twbs/bootstrap.git
synced 2025-11-04 00:03:15 -05:00
Added classes for lg-pull, lg-push, lg-offset, sm-pull, sm-push, sm-offset
This commit is contained in:
Jeff Tickle
parent
7a3c61ee33
commit
1583dd55e9
28
css.html
28
css.html
@ -299,31 +299,31 @@ base_url: "../"
|
||||
</div>
|
||||
|
||||
<h3 id="grid-offsetting">Offsetting columns</h3>
|
||||
<p>Move columns to the right using <code>.col-offset-*</code> classes. These classes increase the left margin of a column by <code>*</code> columns. For example, <code>.col-offset-4</code> moves <code>.col-lg-4</code> over four columns.</p>
|
||||
<p>Move columns to the right using <code>.col-lg-offset-*</code> classes. These classes increase the left margin of a column by <code>*</code> columns. For example, <code>.col-lg-offset-4</code> moves <code>.col-lg-4</code> over four columns.</p>
|
||||
<div class="bs-docs-grid">
|
||||
<div class="row show-grid">
|
||||
<div class="col-lg-4">4</div>
|
||||
<div class="col-lg-4 col-offset-4">4 offset 4</div>
|
||||
<div class="col-lg-4 col-lg-offset-4">4 offset 4</div>
|
||||
</div><!-- /row -->
|
||||
<div class="row show-grid">
|
||||
<div class="col-lg-3 col-offset-3">3 offset 3</div>
|
||||
<div class="col-lg-3 col-offset-3">3 offset 3</div>
|
||||
<div class="col-lg-3 col-lg-offset-3">3 offset 3</div>
|
||||
<div class="col-lg-3 col-lg-offset-3">3 offset 3</div>
|
||||
</div><!-- /row -->
|
||||
<div class="row show-grid">
|
||||
<div class="col-lg-6 col-offset-3">6 offset 3</div>
|
||||
<div class="col-lg-6 col-lg-offset-3">6 offset 3</div>
|
||||
</div><!-- /row -->
|
||||
</div>
|
||||
{% highlight html %}
|
||||
<div class="row">
|
||||
<div class="col-lg-4">...</div>
|
||||
<div class="col-lg-4 col-offset-4">...</div>
|
||||
<div class="col-lg-4 col-lg-offset-4">...</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-3 col-offset-3">3 offset 3</div>
|
||||
<div class="col-lg-3 col-offset-3">3 offset 3</div>
|
||||
<div class="col-lg-3 col-lg-offset-3">3 offset 3</div>
|
||||
<div class="col-lg-3 col-lg-offset-3">3 offset 3</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-6 col-offset-3">...</div>
|
||||
<div class="col-lg-6 col-lg-offset-3">...</div>
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
|
||||
@ -360,16 +360,16 @@ base_url: "../"
|
||||
{% endhighlight %}
|
||||
|
||||
<h3 id="grid-column-ordering">Column ordering</h3>
|
||||
<p>Easily change the order of our built-in grid columns with <code>.col-push-*</code> and <code>.col-pull-*</code> modifier classes.</p>
|
||||
<p>Easily change the order of our built-in grid columns with <code>.col-lg-push-*</code> and <code>.col-lg-pull-*</code> modifier classes.</p>
|
||||
<div class="row show-grid">
|
||||
<div class="col-lg-9 col-push-3">9</div>
|
||||
<div class="col-lg-3 col-pull-9">3</div>
|
||||
<div class="col-lg-9 col-lg-push-3">9</div>
|
||||
<div class="col-lg-3 col-lg-pull-9">3</div>
|
||||
</div>
|
||||
|
||||
{% highlight html %}
|
||||
<div class="row">
|
||||
<div class="col-lg-9 col-push-3">9</div>
|
||||
<div class="col-lg-3 col-pull-9">3</div>
|
||||
<div class="col-lg-9 col-lg-push-3">9</div>
|
||||
<div class="col-lg-3 col-lg-pull-9">3</div>
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
|
||||
|
||||
165
dist/css/bootstrap.css
vendored
165
dist/css/bootstrap.css
vendored
@ -931,72 +931,105 @@ pre code {
|
||||
.col-sm-12 {
|
||||
width: 100%;
|
||||
}
|
||||
.col-push-1 {
|
||||
.col-sm-push-1 {
|
||||
left: 8.333333333333332%;
|
||||
}
|
||||
.col-push-2 {
|
||||
.col-sm-push-2 {
|
||||
left: 16.666666666666664%;
|
||||
}
|
||||
.col-push-3 {
|
||||
.col-sm-push-3 {
|
||||
left: 25%;
|
||||
}
|
||||
.col-push-4 {
|
||||
.col-sm-push-4 {
|
||||
left: 33.33333333333333%;
|
||||
}
|
||||
.col-push-5 {
|
||||
.col-sm-push-5 {
|
||||
left: 41.66666666666667%;
|
||||
}
|
||||
.col-push-6 {
|
||||
.col-sm-push-6 {
|
||||
left: 50%;
|
||||
}
|
||||
.col-push-7 {
|
||||
.col-sm-push-7 {
|
||||
left: 58.333333333333336%;
|
||||
}
|
||||
.col-push-8 {
|
||||
.col-sm-push-8 {
|
||||
left: 66.66666666666666%;
|
||||
}
|
||||
.col-push-9 {
|
||||
.col-sm-push-9 {
|
||||
left: 75%;
|
||||
}
|
||||
.col-push-10 {
|
||||
.col-sm-push-10 {
|
||||
left: 83.33333333333334%;
|
||||
}
|
||||
.col-push-11 {
|
||||
.col-sm-push-11 {
|
||||
left: 91.66666666666666%;
|
||||
}
|
||||
.col-pull-1 {
|
||||
.col-sm-pull-1 {
|
||||
right: 8.333333333333332%;
|
||||
}
|
||||
.col-pull-2 {
|
||||
.col-sm-pull-2 {
|
||||
right: 16.666666666666664%;
|
||||
}
|
||||
.col-pull-3 {
|
||||
.col-sm-pull-3 {
|
||||
right: 25%;
|
||||
}
|
||||
.col-pull-4 {
|
||||
.col-sm-pull-4 {
|
||||
right: 33.33333333333333%;
|
||||
}
|
||||
.col-pull-5 {
|
||||
.col-sm-pull-5 {
|
||||
right: 41.66666666666667%;
|
||||
}
|
||||
.col-pull-6 {
|
||||
.col-sm-pull-6 {
|
||||
right: 50%;
|
||||
}
|
||||
.col-pull-7 {
|
||||
.col-sm-pull-7 {
|
||||
right: 58.333333333333336%;
|
||||
}
|
||||
.col-pull-8 {
|
||||
.col-sm-pull-8 {
|
||||
right: 66.66666666666666%;
|
||||
}
|
||||
.col-pull-9 {
|
||||
.col-sm-pull-9 {
|
||||
right: 75%;
|
||||
}
|
||||
.col-pull-10 {
|
||||
.col-sm-pull-10 {
|
||||
right: 83.33333333333334%;
|
||||
}
|
||||
.col-pull-11 {
|
||||
.col-sm-pull-11 {
|
||||
right: 91.66666666666666%;
|
||||
}
|
||||
.col-sm-offset-1 {
|
||||
margin-left: 8.333333333333332%;
|
||||
}
|
||||
.col-sm-offset-2 {
|
||||
margin-left: 16.666666666666664%;
|
||||
}
|
||||
.col-sm-offset-3 {
|
||||
margin-left: 25%;
|
||||
}
|
||||
.col-sm-offset-4 {
|
||||
margin-left: 33.33333333333333%;
|
||||
}
|
||||
.col-sm-offset-5 {
|
||||
margin-left: 41.66666666666667%;
|
||||
}
|
||||
.col-sm-offset-6 {
|
||||
margin-left: 50%;
|
||||
}
|
||||
.col-sm-offset-7 {
|
||||
margin-left: 58.333333333333336%;
|
||||
}
|
||||
.col-sm-offset-8 {
|
||||
margin-left: 66.66666666666666%;
|
||||
}
|
||||
.col-sm-offset-9 {
|
||||
margin-left: 75%;
|
||||
}
|
||||
.col-sm-offset-10 {
|
||||
margin-left: 83.33333333333334%;
|
||||
}
|
||||
.col-sm-offset-11 {
|
||||
margin-left: 91.66666666666666%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
@ -1053,37 +1086,103 @@ pre code {
|
||||
.col-lg-12 {
|
||||
width: 100%;
|
||||
}
|
||||
.col-offset-1 {
|
||||
.col-lg-push-1 {
|
||||
left: 8.333333333333332%;
|
||||
}
|
||||
.col-lg-push-2 {
|
||||
left: 16.666666666666664%;
|
||||
}
|
||||
.col-lg-push-3 {
|
||||
left: 25%;
|
||||
}
|
||||
.col-lg-push-4 {
|
||||
left: 33.33333333333333%;
|
||||
}
|
||||
.col-lg-push-5 {
|
||||
left: 41.66666666666667%;
|
||||
}
|
||||
.col-lg-push-6 {
|
||||
left: 50%;
|
||||
}
|
||||
.col-lg-push-7 {
|
||||
left: 58.333333333333336%;
|
||||
}
|
||||
.col-lg-push-8 {
|
||||
left: 66.66666666666666%;
|
||||
}
|
||||
.col-lg-push-9 {
|
||||
left: 75%;
|
||||
}
|
||||
.col-lg-push-10 {
|
||||
left: 83.33333333333334%;
|
||||
}
|
||||
.col-lg-push-11 {
|
||||
left: 91.66666666666666%;
|
||||
}
|
||||
.col-lg-pull-1 {
|
||||
right: 8.333333333333332%;
|
||||
}
|
||||
.col-lg-pull-2 {
|
||||
right: 16.666666666666664%;
|
||||
}
|
||||
.col-lg-pull-3 {
|
||||
right: 25%;
|
||||
}
|
||||
.col-lg-pull-4 {
|
||||
right: 33.33333333333333%;
|
||||
}
|
||||
.col-lg-pull-5 {
|
||||
right: 41.66666666666667%;
|
||||
}
|
||||
.col-lg-pull-6 {
|
||||
right: 50%;
|
||||
}
|
||||
.col-lg-pull-7 {
|
||||
right: 58.333333333333336%;
|
||||
}
|
||||
.col-lg-pull-8 {
|
||||
right: 66.66666666666666%;
|
||||
}
|
||||
.col-lg-pull-9 {
|
||||
right: 75%;
|
||||
}
|
||||
.col-lg-pull-10 {
|
||||
right: 83.33333333333334%;
|
||||
}
|
||||
.col-lg-pull-11 {
|
||||
right: 91.66666666666666%;
|
||||
}
|
||||
.col-lg-offset-1 {
|
||||
margin-left: 8.333333333333332%;
|
||||
}
|
||||
.col-offset-2 {
|
||||
.col-lg-offset-2 {
|
||||
margin-left: 16.666666666666664%;
|
||||
}
|
||||
.col-offset-3 {
|
||||
.col-lg-offset-3 {
|
||||
margin-left: 25%;
|
||||
}
|
||||
.col-offset-4 {
|
||||
.col-lg-offset-4 {
|
||||
margin-left: 33.33333333333333%;
|
||||
}
|
||||
.col-offset-5 {
|
||||
.col-lg-offset-5 {
|
||||
margin-left: 41.66666666666667%;
|
||||
}
|
||||
.col-offset-6 {
|
||||
.col-lg-offset-6 {
|
||||
margin-left: 50%;
|
||||
}
|
||||
.col-offset-7 {
|
||||
.col-lg-offset-7 {
|
||||
margin-left: 58.333333333333336%;
|
||||
}
|
||||
.col-offset-8 {
|
||||
.col-lg-offset-8 {
|
||||
margin-left: 66.66666666666666%;
|
||||
}
|
||||
.col-offset-9 {
|
||||
.col-lg-offset-9 {
|
||||
margin-left: 75%;
|
||||
}
|
||||
.col-offset-10 {
|
||||
.col-lg-offset-10 {
|
||||
margin-left: 83.33333333333334%;
|
||||
}
|
||||
.col-offset-11 {
|
||||
.col-lg-offset-11 {
|
||||
margin-left: 91.66666666666666%;
|
||||
}
|
||||
}
|
||||
|
||||
2
dist/css/bootstrap.min.css
vendored
2
dist/css/bootstrap.min.css
vendored
File diff suppressed because one or more lines are too long
104
less/grid.less
104
less/grid.less
@ -125,29 +125,42 @@
|
||||
.col-sm-12 { width: 100%; }
|
||||
|
||||
// Push and pull columns for source order changes
|
||||
.col-push-1 { left: percentage((1 / @grid-columns)); }
|
||||
.col-push-2 { left: percentage((2 / @grid-columns)); }
|
||||
.col-push-3 { left: percentage((3 / @grid-columns)); }
|
||||
.col-push-4 { left: percentage((4 / @grid-columns)); }
|
||||
.col-push-5 { left: percentage((5 / @grid-columns)); }
|
||||
.col-push-6 { left: percentage((6 / @grid-columns)); }
|
||||
.col-push-7 { left: percentage((7 / @grid-columns)); }
|
||||
.col-push-8 { left: percentage((8 / @grid-columns)); }
|
||||
.col-push-9 { left: percentage((9 / @grid-columns)); }
|
||||
.col-push-10 { left: percentage((10/ @grid-columns)); }
|
||||
.col-push-11 { left: percentage((11/ @grid-columns)); }
|
||||
.col-sm-push-1 { left: percentage((1 / @grid-columns)); }
|
||||
.col-sm-push-2 { left: percentage((2 / @grid-columns)); }
|
||||
.col-sm-push-3 { left: percentage((3 / @grid-columns)); }
|
||||
.col-sm-push-4 { left: percentage((4 / @grid-columns)); }
|
||||
.col-sm-push-5 { left: percentage((5 / @grid-columns)); }
|
||||
.col-sm-push-6 { left: percentage((6 / @grid-columns)); }
|
||||
.col-sm-push-7 { left: percentage((7 / @grid-columns)); }
|
||||
.col-sm-push-8 { left: percentage((8 / @grid-columns)); }
|
||||
.col-sm-push-9 { left: percentage((9 / @grid-columns)); }
|
||||
.col-sm-push-10 { left: percentage((10/ @grid-columns)); }
|
||||
.col-sm-push-11 { left: percentage((11/ @grid-columns)); }
|
||||
|
||||
.col-pull-1 { right: percentage((1 / @grid-columns)); }
|
||||
.col-pull-2 { right: percentage((2 / @grid-columns)); }
|
||||
.col-pull-3 { right: percentage((3 / @grid-columns)); }
|
||||
.col-pull-4 { right: percentage((4 / @grid-columns)); }
|
||||
.col-pull-5 { right: percentage((5 / @grid-columns)); }
|
||||
.col-pull-6 { right: percentage((6 / @grid-columns)); }
|
||||
.col-pull-7 { right: percentage((7 / @grid-columns)); }
|
||||
.col-pull-8 { right: percentage((8 / @grid-columns)); }
|
||||
.col-pull-9 { right: percentage((9 / @grid-columns)); }
|
||||
.col-pull-10 { right: percentage((10/ @grid-columns)); }
|
||||
.col-pull-11 { right: percentage((11/ @grid-columns)); }
|
||||
.col-sm-pull-1 { right: percentage((1 / @grid-columns)); }
|
||||
.col-sm-pull-2 { right: percentage((2 / @grid-columns)); }
|
||||
.col-sm-pull-3 { right: percentage((3 / @grid-columns)); }
|
||||
.col-sm-pull-4 { right: percentage((4 / @grid-columns)); }
|
||||
.col-sm-pull-5 { right: percentage((5 / @grid-columns)); }
|
||||
.col-sm-pull-6 { right: percentage((6 / @grid-columns)); }
|
||||
.col-sm-pull-7 { right: percentage((7 / @grid-columns)); }
|
||||
.col-sm-pull-8 { right: percentage((8 / @grid-columns)); }
|
||||
.col-sm-pull-9 { right: percentage((9 / @grid-columns)); }
|
||||
.col-sm-pull-10 { right: percentage((10/ @grid-columns)); }
|
||||
.col-sm-pull-11 { right: percentage((11/ @grid-columns)); }
|
||||
|
||||
// Offsets
|
||||
.col-sm-offset-1 { margin-left: percentage((1 / @grid-columns)); }
|
||||
.col-sm-offset-2 { margin-left: percentage((2 / @grid-columns)); }
|
||||
.col-sm-offset-3 { margin-left: percentage((3 / @grid-columns)); }
|
||||
.col-sm-offset-4 { margin-left: percentage((4 / @grid-columns)); }
|
||||
.col-sm-offset-5 { margin-left: percentage((5 / @grid-columns)); }
|
||||
.col-sm-offset-6 { margin-left: percentage((6 / @grid-columns)); }
|
||||
.col-sm-offset-7 { margin-left: percentage((7 / @grid-columns)); }
|
||||
.col-sm-offset-8 { margin-left: percentage((8 / @grid-columns)); }
|
||||
.col-sm-offset-9 { margin-left: percentage((9 / @grid-columns)); }
|
||||
.col-sm-offset-10 { margin-left: percentage((10/ @grid-columns)); }
|
||||
.col-sm-offset-11 { margin-left: percentage((11/ @grid-columns)); }
|
||||
}
|
||||
|
||||
// Medium and large device columns (desktop and up)
|
||||
@ -182,18 +195,43 @@
|
||||
.col-lg-11 { width: percentage((11/ @grid-columns)); }
|
||||
.col-lg-12 { width: 100%; }
|
||||
|
||||
// Push and pull columns for source order changes
|
||||
.col-lg-push-1 { left: percentage((1 / @grid-columns)); }
|
||||
.col-lg-push-2 { left: percentage((2 / @grid-columns)); }
|
||||
.col-lg-push-3 { left: percentage((3 / @grid-columns)); }
|
||||
.col-lg-push-4 { left: percentage((4 / @grid-columns)); }
|
||||
.col-lg-push-5 { left: percentage((5 / @grid-columns)); }
|
||||
.col-lg-push-6 { left: percentage((6 / @grid-columns)); }
|
||||
.col-lg-push-7 { left: percentage((7 / @grid-columns)); }
|
||||
.col-lg-push-8 { left: percentage((8 / @grid-columns)); }
|
||||
.col-lg-push-9 { left: percentage((9 / @grid-columns)); }
|
||||
.col-lg-push-10 { left: percentage((10/ @grid-columns)); }
|
||||
.col-lg-push-11 { left: percentage((11/ @grid-columns)); }
|
||||
|
||||
.col-lg-pull-1 { right: percentage((1 / @grid-columns)); }
|
||||
.col-lg-pull-2 { right: percentage((2 / @grid-columns)); }
|
||||
.col-lg-pull-3 { right: percentage((3 / @grid-columns)); }
|
||||
.col-lg-pull-4 { right: percentage((4 / @grid-columns)); }
|
||||
.col-lg-pull-5 { right: percentage((5 / @grid-columns)); }
|
||||
.col-lg-pull-6 { right: percentage((6 / @grid-columns)); }
|
||||
.col-lg-pull-7 { right: percentage((7 / @grid-columns)); }
|
||||
.col-lg-pull-8 { right: percentage((8 / @grid-columns)); }
|
||||
.col-lg-pull-9 { right: percentage((9 / @grid-columns)); }
|
||||
.col-lg-pull-10 { right: percentage((10/ @grid-columns)); }
|
||||
.col-lg-pull-11 { right: percentage((11/ @grid-columns)); }
|
||||
|
||||
// Offsets
|
||||
.col-offset-1 { margin-left: percentage((1 / @grid-columns)); }
|
||||
.col-offset-2 { margin-left: percentage((2 / @grid-columns)); }
|
||||
.col-offset-3 { margin-left: percentage((3 / @grid-columns)); }
|
||||
.col-offset-4 { margin-left: percentage((4 / @grid-columns)); }
|
||||
.col-offset-5 { margin-left: percentage((5 / @grid-columns)); }
|
||||
.col-offset-6 { margin-left: percentage((6 / @grid-columns)); }
|
||||
.col-offset-7 { margin-left: percentage((7 / @grid-columns)); }
|
||||
.col-offset-8 { margin-left: percentage((8 / @grid-columns)); }
|
||||
.col-offset-9 { margin-left: percentage((9 / @grid-columns)); }
|
||||
.col-offset-10 { margin-left: percentage((10/ @grid-columns)); }
|
||||
.col-offset-11 { margin-left: percentage((11/ @grid-columns)); }
|
||||
.col-lg-offset-1 { margin-left: percentage((1 / @grid-columns)); }
|
||||
.col-lg-offset-2 { margin-left: percentage((2 / @grid-columns)); }
|
||||
.col-lg-offset-3 { margin-left: percentage((3 / @grid-columns)); }
|
||||
.col-lg-offset-4 { margin-left: percentage((4 / @grid-columns)); }
|
||||
.col-lg-offset-5 { margin-left: percentage((5 / @grid-columns)); }
|
||||
.col-lg-offset-6 { margin-left: percentage((6 / @grid-columns)); }
|
||||
.col-lg-offset-7 { margin-left: percentage((7 / @grid-columns)); }
|
||||
.col-lg-offset-8 { margin-left: percentage((8 / @grid-columns)); }
|
||||
.col-lg-offset-9 { margin-left: percentage((9 / @grid-columns)); }
|
||||
.col-lg-offset-10 { margin-left: percentage((10/ @grid-columns)); }
|
||||
.col-lg-offset-11 { margin-left: percentage((11/ @grid-columns)); }
|
||||
}
|
||||
|
||||
// Large desktops and up
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user