10

When I resize the window to a medium size the two links on the right collapse and cause the navbar to take two rows even though there is enough space between the right links and the left links.

http://www.bootply.com/fthRQCpN7d

Ayrad
  • 3,996
  • 8
  • 45
  • 86
  • 1
    I had the same problem. I didn’t find a real solution to fix it… Instead I changed the `@grid-float-breakpoint` value in the `.less` file, to make the navbar collapse before displaying this two lines layout. – Einenlum Jun 28 '14 at 13:35
  • 1
    *...even thought there is enough space...* This isn't actually true. When the window hits the 992 breakpoint, which is when your problem arises, your .container width shrinks, and there is no longer enough space. – Shawn Taylor Jun 28 '14 at 21:57
  • Possible duplicate of http://stackoverflow.com/questions/20012665/disable-bootstrap-3-navbar-going-2-rows-in-medium-viewport-size – 絢瀬絵里 Mar 07 '17 at 14:02

4 Answers4

8

You could write a @media-query to reduce the left/right padding when it hits the offending breakpoint:

@media(max-width:992px){
.nav>li>a {
padding-left: 10px;
padding-right:10px
    }
}

May not work for every instance, but seems to for your example: http://www.bootply.com/fthRQCpN7d

Shawn Taylor
  • 15,590
  • 4
  • 32
  • 39
  • 1
    I like this solution it keeps the navbar within the container and doesn't require recompiling – Ayrad Jun 29 '14 at 11:10
3

It is collapsing because .container is changing in width at the different viewport sizes.

A few possible solutions:

  1. Use a responsive utility (ie. .hidden-md) on one item to prevent the issue.

  2. Change the .container to .container-fluid.

    <div class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container-fluid">
  .....
  </div>
</div>

  3. Add your own class to the <div class="container"> and override the width property at one or more viewport sizes. For example:

    @media (min-width: 768px) { ... }
3

The collapsing point depends on the @grid-float-breakpoint value.

You have to download a customized version of Bootstrap.

To do it, go to http://getbootstrap.com/customize/ and, in section "grid system", set the @grid-float-breakpoint to a custom value. The unit is the pixel.

customize bootstrap

The click the "compile and download" button, at the end of the page.

Nicolas Henrard
  • 843
  • 8
  • 19
2

Since you hane given .container class please use .container-fluid class. Or give 

.container {
      width: 100%;
}
J Prakash
  • 1,323
  • 8
  • 13
  • this doesn't fix OP's issue, it just put it off until that breakpoint – Shawn Taylor Jun 28 '14 at 21:36
  • I take that back. it sort-of fixes it, but the issue still pops up at the breakpoint, and it also brings design baggage he may not want (not every site wants to be fluid) – Shawn Taylor Jun 28 '14 at 21:39