Bootstrap navbar fixed right
我正在尝试使用卓越的bootstrap 3导航栏系统创建导航栏菜单,并带有下拉菜单等。我想粘贴到屏幕右侧的窗口,以便在屏幕展开时左侧出现空白区域。当屏幕收缩时,我希望它具有标准的折叠行为,以便菜单项被替换为切换图标。这是一个jsfiddle它。Bootstrap navbar fixed right
<div class="header" style="width:850px; margin-left:auto">
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Textual Communities</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Public Communities <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">My Communities <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Log in or register <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
现在,这是几乎确定。如果您展开窗口,则左侧会出现空白区域,而菜单栏则粘在右侧边缘。但是,一个问题:
- 如果收缩窗口,菜单项消失,很好,但你没有看到表明您可以切换菜单,以便它再次出现在左边,堆叠右侧的漂亮的图标垂直。
看来问题在于周围div的宽度设置(必要时,margin-left:auto会将div推到右侧)与引导行为冲突。所以你不会看到切换菜单图标。如果从周围的div中删除style =“width:850px; margin-left:auto”,您将看到,当您收缩和展开窗口时,好的切换图标会随之而来。但是,然后,你失去了坚持到正确的行为。
所以这里的问题。看来恶棍是围绕div的宽度设置。但我没有看到如何在没有设置元素宽度的情况下使margin-auto(或其他)工作。有任何想法吗?我尝试过各种各样的东西,花车等,但似乎没有任何工作。
更新更多的实验,我可以看到宽度设置是从屏幕上推开关图标。我该如何阻止...?使用位置可能?
作为解决这个问题的一种快速方法,您可以将right: 550px;
添加到.navbar-toggle
类中,该类将使按钮更靠近主标题文本。你可以看到your updated Fiddle here。
UPDATE
好了类似于其他答案尝试添加媒体这样的查询,而不是:
@media only screen and (max-width:767px){
.header {
width:auto !important;
}
.navbar-header{
background: red;
}
背景颜色只是有一个视觉参考,可以拆卸。 Updated Fiddle here。
尝试在css下面设置。如果您希望在桌面上使用width:850px
属性的标题,请将其重写为设备。 http://jsfiddle.net/n3ocdm7w/11/
@media only screen and (max-width:760px){
.header{
width:100%!important;
}
}
并从切换按钮aria-expanded="false"
,那么它会工作。
不是一个好的解决方案。第一个问题:切换图标应固定在右侧窗格中;这不是这个。第二:这对窗口宽度很敏感,需要重置每个菜单 –
@PeterRobinson答案更新 – crazymatt