2015-01-15 86 views
0

我的導航欄有問題。即使在調整窗口大小時,我的鏈接也應該填充整個頂部。我已經使用jquery來解決問題的人,它不工作。非常感謝您的幫助。Bootstrap導航欄不填充窗口頂部,

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <link type="text/css" href="style.css" rel="stylesheet"> 
    <link type="text/css" href="bootstrap.css" rel="stylesheet"> 
    </head> 
    <body> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
    <script language="javascript" type="text/javascript"> 
    (function($){ 
    $.fn.autowidth = function() { 
     return this.each(function() {   
     $('li', this).css({'width' : (100/$('li', this).length) + '%'}) 
     }); 
    }; 
    })(jQuery); 

    $(document).ready(function(){ 
    $('nav > ul').autowidth();  
    }); 
    </script> 

<nav class="navbar navbar-custom navbar-fixed-top"> 
<div class="container"> 
    <div class="row"> 

    <ul class="col-xs-6 col-md-3"> 
    <li><a href="#">Home</a></li> 
    </ul> 

    <ul class="col-xs-6 col-md-3"> 
    <li><a href="#">The Company</a></li> 
    </ul> 

    <ul class="col-xs-6 col-md-3"> 
    <li><a href="#">Products</a></li> 
    </ul> 

    <ul class="col-xs-6 col-md-3"> 
    <li><a href="#">About us</a></li> 
    </ul> 

    </div> 
</div> 
</nav> 
+0

你會創建一個包含bootstrap css的jsfiddle在租約? – jbg

回答

0

您的意思是您想在調整窗口大小時將四個鏈接保留在一行中嗎?
您只需要將ul類從「col-xs-6」更改爲「col-xs-3」。

你能得到關於這個CSS類在這裏grid-options

0

這裏更多的信息對您的問題的解決方案 HTML

<nav class="navbar navbar-custom navbar-fixed-top"> 
<div class="container"> 
<div class="row"> 

<ul class="col-xs-2 col-md-3 col-lg-3"> 
<li><a href="#">Home</a></li> 
</ul> 

<ul class="col-xs-4 col-md-3 col-lg-3"> 
<li><a href="#">The Company</a></li> 
</ul> 

<ul class="col-xs-3 col-md-3 col-lg-3"> 
<li><a href="#">Products</a></li> 
</ul> 

<ul class="col-xs-3 col-md-3 col-lg-3"> 
<li><a href="#">About us</a></li> 
</ul> 

使用最新的引導和最新的jQuery

[演示爲小提琴](http://jsfiddle.net/rpwm57g4/「小提琴的例子)

+0

當你擴展到1024菜單時會自動調整 –