jquery - Bootstrap 导航栏没有填满窗口顶部,

标签 jquery css

我的导航栏有问题。即使我调整窗口大小时,我的链接也应该填满整个顶部。我已经使用 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>

最佳答案

你的意思是你想在调整窗口大小时保持一行四个链接?
您只需将 ul 类从“col-xs-6”更改为“col-xs-3”即可。

您可以在此处获得有关此 css 类的更多信息 grid-options

关于jquery - Bootstrap 导航栏没有填满窗口顶部,,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27974008/

相关文章:

html - 动态大小的并排 float

javascript - 如何使用ajax和$.post获取php页面中的参数

jquery - 需要帮助在滚动条上制作粘性导航栏 - 在 nodejs/express 中使用 jade 和手写笔

jQuery:根据单选按钮选择更改可选下拉选项

javascript - Ajax Form 和 Django 集成发布错误

html - CSS Transition 不适用于嵌套元素

css - 以百分比表示的 div 高度,父高度的一半

html - css hover 想显示一个框

jquery - 使用 JQuery-UI 对表中的第 2 级列进行排序

jquery - Bootstrap 3 表单使用 input-group-addon 通过 Jquery Validate 包装错误标签