CODEWITHSUNDEEP
twitter-bootstrap
Miriam H.
Miriam H.

Reputation: 681

Disable ONE of the Twitter Bootstrap responsive layouts

I would like to disable one of the Responsive layouts. Whatever the second smallest layout is before it switches to the mobile view.

Upvotes: 16

Views: 19122

Answers (4)

Trav McKinney
Trav McKinney

Reputation: 998

As an improvement to spinningarrow's way to do this when using LESS is to set the @gridColumnWidth768 and @gridGutterWidth768 to match @gridColumnWidth and @gridGutterWidth like so:

@gridColumnWidth768: @gridColumnWidth;
@gridGutterWidth768: @gridGutterWidth;

As a rule, I try to leave alone vendor files and only edit them as a last resort. This allows me to fix this issue without having to edit the core bootstrap files.

Upvotes: 3

cbirdsong
cbirdsong

Reputation: 124

If you aren't compiling LESS, the best way I've found is going into bootstrap.css and commenting out the size you don't want active. The CSS is pretty well-organized, and disabling one of the sizes doesn't appear to affect anything else.

(Of course, you have to be careful you don't re-enable them when updating Bootstrap.)

Upvotes: -1

2046
2046

Reputation: 1

  • call your css after the bootstrap call.
  • In your css copy the row, span css form the layout you want and place it in your css.
  • change the media query to something like this (The max width is the width you like to stick to):
@media (max-width: 1200px) {
    .row {
        margin-left: -30px;
        *zoom: 1;
    }
    .row:before,
    .row:after {
        display: table;
        content: "";
        line-height: 0;
    }
    .row:after {
        clear: both;
    }
    [class*="span"] {
        float: left;
        margin-left: 30px;
    }
    .container,
    .navbar-static-top .container,
    .navbar-fixed-top .container,
    .navbar-fixed-bottom .container {
        width: 1170px;
    }
    .span12 {
        width: 1170px;
    }
    .span11 {
        width: 1070px;
    }
    .span10 {
        width: 970px;
    }
    .span9 {
        width: 870px;
    }
    .span8 {
        width: 770px;
    }
    .span7 {
        width: 670px;
    }
    .span6 {
        width: 570px;
    }
    .span5 {
        width: 470px;
    }
    .span4 {
        width: 370px;
    }
    .span3 {
        width: 270px;
    }
    .span2 {
        width: 170px;
    }
    .span1 {
        width: 70px;
    }
    .offset12 {
        margin-left: 1230px;
    }
    .offset11 {
        margin-left: 1130px;
    }
    .offset10 {
        margin-left: 1030px;
    }
    .offset9 {
        margin-left: 930px;
    }
    .offset8 {
        margin-left: 830px;
    }
    .offset7 {
        margin-left: 730px;
    }
    .offset6 {
        margin-left: 630px;
    }
    .offset5 {
        margin-left: 530px;
    }
    .offset4 {
        margin-left: 430px;
    }
    .offset3 {
        margin-left: 330px;
    }
    .offset2 {
        margin-left: 230px;
    }
    .offset1 {
        margin-left: 130px;
    }
}

Upvotes: 0

spinningarrow
spinningarrow

Reputation: 2436

If you are compiling from the LESS files, this is quite easy. Open up responsive.less and under "MEDIA QUERIES" comment out or remove the @import declaration for whichever layout you don't want. For example, if you didn't want the Tablets to regular desktops one, the code would look like this:

// MEDIA QUERIES
// ------------------

// Phones to portrait tablets and narrow desktops
@import "responsive-767px-max.less";

// Tablets to regular desktops
// @import "responsive-768px-979px.less"; // commented this out because I don't like it

// Large desktops
@import "responsive-1200px-min.less";

After that just recompile bootstrap.less and you should be done.

If, on the other hand, you're not compiling from bootstrap.less and are using bootstrap-responsive.css directly, you can search for the media query for the specific device and remove/comment out that section.

For example, removing the portrait tablet one would look like (in bootstrap-responsive.css):

/* some CSS code above this */

.hidden-desktop {
  display: none !important;
}

/* comment out the following rule entirely in order to disable it */
/*
@media (max-width: 767px) {
  .visible-phone {
    display: inherit !important;
  }
  .hidden-phone {
    display: none !important;
  }
  .hidden-desktop {
    display: inherit !important;
  }
  .visible-desktop {
    display: none !important;
  }
}*/ /* stop commenting out, we want everything below this */

@media (min-width: 768px) and (max-width: 979px) {
  .visible-tablet {
    display: inherit !important;
  }

/* More CSS code follows */

To find out which @media query corresponds to which device width, take a look at http://twitter.github.com/bootstrap/scaffolding.html#responsive; the media queries are given there along with the device sizes they correspond to.

Upvotes: 12

Related Questions