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