Prevent menu from collapsing in 768px display CSS

问题:

I am trying to do a site using twitter bootstrap. I am having relatively less menus, so it kind of fits within the 768px display also. But in bootstrap by default, the menu collapses using media queries. I am not able to prevent this behavior.

This is my html

<div class="row">
    <div class="span3 logo"><h1><img src="img/logo.png" /></h1></div>
    <div class="span9">

        <div class="navbar">
          <div class="navbar-inner">
            <div class="container">
         <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
              <div class="nav-collapse">
                <ul class="nav nav-pills">
                  <li><a href="#">Home</a> </li>
                  <li><a href="#">Services</a> </li>
                  <li><a href="#">Portfolio</a> </li>
                  <li><a href="#">Contact Us</a> </li>
                </ul>
              </div>
            </div>
          </div>
        </div>



    </div>
    </div>

I know it has something to do with the media query in bootstrap, but not able to understand.

回答1:

You'll want to read up the section: Using the media queries at the bootstrap site: http://getbootstrap.com/2.3.2/scaffolding.html#responsive (Bootstrap 2.3.2) http://getbootstrap.com/getting-started/#disable-responsive (Bootstrap 3)

You'll want to use the relevant media queries to override the styles bootstrap adds when your viewport shrinks.

  // Landscape phones and down
  @media (max-width: 480px) { ... }

  // Landscape phone to portrait tablet
  @media (max-width: 768px) { ... }

  // Portrait tablet to landscape and desktop
  @media (min-width: 768px) and (max-width: 980px) { ... }

  // Large desktop
  @media (min-width: 1200px) { .. }

If you don't want the navbar to collapse, remove the 'collapse' from the class name. You should probably get rid of:

<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">

In short, have a look over the docs, there's a section covering this exact thing titled 'Optional responsive variation' here: http://getbootstrap.com/2.3.2/components.html#navbar (Bootstrap 2.3.2)

回答2:

You can customize Twitter Bootstrap css compiling it from sass-twitter-bootstrap scss files and setting $navbarCollapseWidth in _variables.scss to your desired value...

Edit

As @Accipheran stated in the comments, for Bootstrap 3.x the name of the variable you should set is $grid-float-breakpoint.

回答3:

This worked well for me:

.nav-collapse, .nav-collapse.collapse {
    overflow: visible;
}   
.navbar .btn-navbar {
    display: none;
}   

回答4:

Reading the answers, I believe you are talking about Bootstrap version 2. Maybe someone looking for an answer for Bootstrap 3 will arrive here. This answer is for you!

1. Go to Bootstrap customization page
2. redefine the @grid-float-breakpoint value for something hardcoded (e.g. 520px) or for a smaller screen size like @screen-xs-min
3. Press the button at the bottom of the page to recompile the css files
4. substitute your bootstrap.css and bootstrap-min.css files with the ones from the downloaded zip file.

回答5:

find variable:

@grid-float-breakpoint

which is set to @screen-sm, you can change it according to your needs.

If you override the vendor less file, set the variable to 0px, eg:

@grid-float-breakpoint: 0px;

回答6:

If all you want to do is not have the nav collapse until it reaches a smaller value, the simplest way is to head over to the Twitter Bootstrap customization page, change the @navbarCollapseWidth to the value you want, and download the package. Done.

If you want to customize beyond what this page allows, you'll have to override or customize as described in the other answers.

回答7:

This example is from the official website: http://getbootstrap.com/examples/non-responsive/

The changes are in non-responsive.css but the important parts pertaining to .navbar are:

body {
    padding-top: 70px;
    padding-bottom: 30px;
}
.page-header {
    margin-bottom: 30px;
}
.page-header .lead {
    margin-bottom: 10px;
}
.navbar-collapse {
    display: block !important;
    height: auto !important;
    padding-bottom: 0;
    overflow: visible !important;
}
.navbar-nav {
    float: left;
    margin: 0;
}
.navbar-nav > li {
    float: left;
}

回答8:

If you want to completely disable the collapsing navbar, add this variable in your custom LESS file:

@grid-float-breakpoint: 0px;

回答9:

Here's what I used for bootstrap 3.3.4. It's a hack, but it's also not a 2-day fix redoing the css.

@media (min-width: 768px) and (max-width: 979px) {
  .navbar-header {
    width: 100% !important;
  }
  .navbar-toggle {
    display: inline-block !important;
    float: right !important;
  }
}

You may need to tweak the selectors, but basically, make the header full-width, then show and float the button right.