Separate push, pull, offset for Large and Small grids #8974

Merged
merged 1 commit into from Aug 2, 2013

Conversation

Projects
None yet
3 participants
@jtickle
Contributor

jtickle commented Aug 1, 2013

There is a discussion going on about this, but I had to fix the problem to get our theme working with Bootstrap 3.

If you're going to have multiple grids, you have to do pushes, pulls, and offsets for both grids separately. I really don't see a way around this. Consider the following:

<!-- Inside a container, row -->
<div class="col-lg-5 col-sm-4">
    Some Text
</div>
<div class="col-lg-5 col-sm-4 col-push-2">
    Some More Text
</div>
<div class="col-lg-2 col-sm-4 col-pull-5">
    Corporate Logo
</div>

(also available as a fiddle)

This is going on the traditional "info bar" at the bottom of every page, look at the bottom of any modern web page to see what I'm talking about. On tablet and large screens, I want the corporate logo to be centered. On the tablet, the logo can be a little bigger, because I'm going to hide some of the text in the info boxes.

However, there is currently no way whatsoever to specify that the pushing and pulling is different on the small grid. If the small grid is set to the same as the large grid (col-lg-5, col-sm-5, col-push-2) of course it works just fine. But if the grid changes for tablets, then push, pull, and offset all break miserably.

With this patch, you can change the above code to:

<!-- Inside a container, row -->
<div class="col-lg-5 col-sm-4">
    Some Text
</div>
<div class="col-lg-5 col-push-2 col-sm-4 col-sm-push-4">
    Some More Text
</div>
<div class="col-lg-2 col-pull-5 col-sm-4 col-sm-pull-4">
    Corporate Logo
</div>

Classes get a bit cluttered, but honestly I see no other way to do this.

@ggam

This comment has been minimized.

Show comment
Hide comment
@ggam

ggam Aug 1, 2013

Contributor

Nice! Link to the original discussion: #8777.

Contributor

ggam commented Aug 1, 2013

Nice! Link to the original discussion: #8777.

@mdo mdo merged commit 1583dd5 into twbs:3.0.0-wip Aug 2, 2013

1 check passed

default The Travis CI build passed
Details
@mdo

This comment has been minimized.

Show comment
Hide comment
@mdo

mdo Aug 2, 2013

Member

Merged!

Member

mdo commented Aug 2, 2013

Merged!

@jtickle jtickle deleted the jtickle:3.0.0-wip-fixed-grid-push-pull-offset branch Aug 6, 2013

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment