如何在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上實現左右縮進的固定菜單？

回答

相關問題