将Twitter的Navbar从垂直更改为垂直 [英] Change Twitter's Navbar from hortizontal to vertical

问题描述

我是否可以在不更改html结构的情况下在垂直位置使用Twitter的Navbar.这将如何影响表单，下拉列表等元素.

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?

推荐答案

您可以修改CSS，例如:

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;
}
}

尽管在这种情况下使用导航栏右似乎不合理，但以上内容适用于文档中的默认导航栏( http://getbootstrap.com/components/#navbar ).

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).

示例: http://bootply.com/84045

这篇关于将Twitter的Navbar从垂直更改为垂直的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！