Question

我的导航栏有问题。即使我调整窗口大小，我的链接也应该填满整个顶部。我使用了一个jquery来解决它不起作用的问题。非常感谢您的帮助。

 <!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>

Answer 1

你的意思是你想在调整窗口大小时在一行中保留四个链接吗？
你只需要从＆＃34; col-xs-6＆＃34;更改ul类。到＆＃34; col-xs-3＆＃34;。

您可以在grid-options

获取有关此css课程的更多信息

Answer 2

以下是您的问题的解决方案 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>

使用最新的bootstrap和最新的jquery

[演示小提琴]（http://jsfiddle.net/rpwm57g4/“小提琴示例”

Bootstrap导航栏没有填满寡妇的顶部，

2 个答案: