如何使Bootstrap 3导航栏不折叠

Question

I've been searching a lot but still didn't find anything similar. If replace navbar-collapse with navbar I am getting the looks as if you've toggled the show collapsed menu items button. I've also found questions how to decrease the breakpoint at which the navbar collapses, but it's not what I need. What I need is to remove the collapsible menu generally. Any idea?

Answer 1

Bootstrap is displaying collapsed elements because of the way responsive design works: The CSS code is written for the smallest viewport, and then using media queries, the design is progressively enhanced to render elements for each specific viewport.

Thus, the CSS code that is responsible for displaying the "normal" navbar (ie the navbar for a medium to large viewport) is wrapped around @media (min-width: 768px) . That means that as soon as your viewport goes under that value, the elements revert to their original design, which is the small viewport design.

If you do not want to change the breakpoints as proposed in this question , you have a few other solutions:

• Use the non-responsive Bootstrap library
• Create your own navbar by studying the non-responsive one from Bootstrap and copying the relevant code.

Answer 2

You can put the navbar links inside navbar-header , and then add some CSS to override the Bootstrap defaults..

.navbar-nav {
    margin:0;
}
.navbar-nav>li {
    float:none;
    display:inline-block;
}
.navbar-nav>li>a {
  padding-top: 15px;
  padding-bottom: 15px;
}

Demo: http://www.bootply.com/118426

Alternate (display scrollbar instead of wrapping): http://www.bootply.com/118304

Answer 3

i am having this issue and i have just solved it

this will undo the collapse

/* Undo the collapsing navbar */
.navbar-collapse {
    display: block !important;
    height: auto !important;
    padding-bottom: 0;
    overflow: visible !important;
    visibility: visible !important;
}
.navbar-toggle {
    display: none;
}
.navbar-collapse {
    border-top: 0;
}