Change Twitter's Navbar from hortizontal to vertical

问题

Can i use Twitter's Navbar also in an vertical position without changing the html structure. How will this effect the elements as forms, dropdowns etc.

How should such navbar collapse?

回答1:

You could adapt the css, something like:

@media (min-width: 768px) {
  .navbar-collapse {
    height: auto;
    border-top: 0;
    box-shadow: none;
    max-height: none;
    padding-left:0;
    padding-right:0;
  }
  .navbar-collapse.collapse {
    display: block !important;
    width: auto !important;
    padding-bottom: 0;
    overflow: visible !important;
  }
  .navbar-collapse.in {
    overflow-x: visible;
  }

.navbar
{
    max-width:300px;
    margin-right: 0;
    margin-left: 0;
}   

.navbar-nav,
.navbar-nav > li,
.navbar-left,
.navbar-right,
.navbar-header
{float:none !important;}

.navbar-right .dropdown-menu {left:0;right:auto;}
.navbar-collapse .navbar-nav.navbar-right:last-child {
    margin-right: 0;
}
}

Although it doesn't seems reasonable to use a navbar-right in this case the above will work for a default navbar from the docs (http://getbootstrap.com/components/#navbar).

Example: http://bootply.com/84045

来源：https://stackoverflow.com/questions/19191697/change-twitters-navbar-from-hortizontal-to-vertical