CODEWITHSUNDEEP
twitter-bootstrappug
Erik
Erik

Reputation: 3208

Bootstrap grid system collapsing

at around 990px, I'm seeing my grid fold into one giant column.. I'd prefer it not do that and as you can see in the screencap there's a LOT of space to the right... Do I need to add a 2nd col?

This grid looks okay

Suddenly I'm getting one big ol column

.col-md-12.col-sm-6
btn.btn.btn-primary( ui-sref='menus.new')
    |Create New Menu

.row
    .col-md-2
        h4 KEY
    .col-md-2.hidden-sm
        h4 CREATED
    .col-md-3.col-md-offset-3
        h4 ACTIONS

.row.form-group( ng-repeat='menu in menus')
    .col-md-2
        | {{menu.key}}
    .col-md-2.hidden-sm
        | {{::menu.created | date : 'medium' }}
    .col-md-3.col-md-offset-2
        .row
            .col-md-6
                button.btn.btn-default.btn-block(ui-sref="menus.edit({id: menu._id})")
                    | Edit
            .col-md-6
                button.btn.btn-danger.btn-block(ng-click="removeMenu(menu._id, $index)")
                    | Delete

I've tried hiding the created column to no avail

Upvotes: 0

Views: 554

Answers (2)

ZombieChowder
ZombieChowder

Reputation: 1204

The reason for this is that when you try putting it in 900px it detects that it should change for a mobile or a tablet. This is the special thing about Bootstrap it resizes everything for you, so you don't have to write media queries. The easiest way to do is, is to specify how many columns would you like when the screen goes "small", thus using the col-sm-*

The easiest way to solve it, is to embed an col-sm- 'size you want from 1 to 12' next to your col-md-*

Upvotes: 1

Erik
Erik

Reputation: 3208

Ok after tinkering I realized.. when you hide things in bootstrap you've got to call out each level explicitly that you want to hide.

And what you're seeing in my screen cap... is at the very small (aka xs) level.. everything I thought I was hiding is cramming back into rendered view. BAH

The Fix Example :

.row
    .col-md-2
        h4 KEY
    .col-md-2.hidden-sm.hidden-xs
        h4 CREATED

Upvotes: 0

Related Questions