Geek Answers Handbook

Bootstrap 3 - remove breakpoint between md and lg

I am using Bootstrap 3 and trying to remove / exclude a breakpoint between medium and large devices. I have an existing website that is optimized for 970px that looks great. What I'm trying to do is remove the md> lg breakpoint so that even on large widescreen desktops the maximum body width is 970px and is still centered.

Does anyone know if there is a quick fix for this?

Any advice would be highly appreciated

Decbrad

+4
source share
3 answers

( ), CSS .

LESS

@media (min-width: @screen-lg) { 
  .container {
      width: 970px;
   }
}

, bootstrap CSS ( , bootstrap.css)

@media (min-width: 970px) and (max-width: 2500px) {
   .container {
      width: 970px;
   }   
}

- bootstrap.css 1240

@media (min-width: 1200px) {
  .container {
     width: 1170px;  /* change 1170 to 970 */
  }
}
+11

, :

@media (min-width: @screen-sm) { .container { width:@screen-md; } }

@screen-md 992px. () .

+2

:

.container-fluid,
.container {
  // Disable large-desktop breakpoint.
  max-width: $container-md;
}

No need for media queries or anything else.

The value is $container-mdusually 970pxif you have not changed $grid-gutter-width. For LESS, replace the $variables with @. For regular CSS, replace the variable with the size of the hard coded pixel.

+1
source

More articles:


All Articles