如何在Bootstrap上实现左右缩进的固定菜单？

我需要这个菜单是总是从页面的左右两侧不断缩进顶部： enter image description here 如何在Bootstrap上实现左右缩进的固定菜单？

现在，它已经与jQuery做这样：

$('.navbar.navbar-default.navbar-fixed-top').css('width', (parseInt($('.col-xs-8.col').width()) + parseInt($('.col-xs-4.col').width()) + parseInt($('.col-xs-4.col').css('padding-left')) + parseInt($('.col-xs-4.col').css('padding-right')) + parseInt($('.col-xs-8.col').css('padding-left'))).toString() + 'px'); 
$('.navbar.navbar-default.navbar-fixed-top').css('left', (parseInt($('.col-xs-8.col').offset().left) + parseInt($('.col-xs-8.col').css('padding-left'))).toString() + 'px');

但它不”当我改变页面的比例时，t正常工作： enter image description here

那么我怎么才能解决这个问题，只需使用Bootstrap（也许少一些参数），而不使用JS呢？

菜单的HTML代码：

<div class="navbar navbar-default navbar-fixed-top" role="navigation"> 
     <div class="container-fluid"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse"> 
        <span class="sr-only">Меню</span> 
       </button> 
       <a class="navbar-brand" href="/"><img style="max-width:100%; max-height:100%;" src="http://elcode.ru/images/logo.png"/></a> 
      </div> 
      <div class="navbar-collapse collapse"> 
       <ul class="nav navbar-nav"> 
        <li><a href="/news">News</a></li> 
        <li><a href="#">Services</a></li> 
        <li><a href="#">Hotline</a></li> 
        <li><a href="#">Schedule</a></li> 
       </ul> 
      </div><!--/.nav-collapse --> 
     </div><!--/.container-fluid --> 
    </div>

来源

2014-10-29 paus

这是稍微不清楚你想达到什么......你只是希望它具有不同于始终保持左缩进1的变化？ – webeno 2014-10-29 07:44:15

我需要这个菜单总是在12列的宽度顶部，我用于下面的文章和公告，但没有拉伸所有窗口大小，当这个菜单有固定的位置。 – paus 2014-10-29 07:47:39

对不起，这并没有太大的帮助，你想菜单拉伸？ – webeno 2014-10-29 07:49:31

我怎么知道你不需要这里的任何JS，纯引导就够了。

我上codepen做了一个小样本 - http://codepen.io/tanotify/pen/BsxHA 我加入到头.container增加宽度

<!-- Fixed navbar --> 
<div class="navbar container navbar-default navbar-fixed-top" role="navigation">

来源

2014-10-29 07:50:02 tanotify

我没有看到你的解决方案和OP的情况下，似乎发生的方式之间的差异，你可以澄清你相信你用这个解决了什么问题？ – webeno 2014-10-29 07:55:13

，你可以这样做只是使用CSS。

.navbar.navbar-default.navbar-fixed-top{ width : 100%; position: fixed;}

这将是从左到右的屏幕分辨率

来源

2014-10-29 08:20:11 user3078111

如何在Bootstrap上实现左右缩进的固定菜单？

回答

相关问题