我在我的网站上使用bootstrap并且导航栏固定顶部有问题.当我只使用常规导航栏时,一切都很好.但是,当我尝试将其切换到导航栏固定顶部时,网站上的所有其他内容都会向上移动,就像导航栏不在那里而导航栏重叠一样.这基本上是我如何摆脱它:
.navbar.navbar-fixed-top
.navbar-inner
.container
.container
.row
//yield content
我试图准确复制bootstraps示例,但只有在使用navbar固定顶部时才会出现此问题.我究竟做错了什么？
有没有办法在bootstrap 4中禁用响应式navBar？我不希望移动版本中的下拉菜单仍然可以看到该品牌旁边的2个链接.作为一个加号,我想知道是否可以将链接放在栏中的右侧.Pull-xs-right似乎无法正常工作.
我当前的代码如下所示:
<nav class="navbar navbar-fixed-top navbar-toggleable-sm navbar-light bg-faded">
<a href="/" class="navbar-brand">PIM</a>
<ul class="nav navbar-nav pull-xs-right">
<li class="nav-item"><Link class="nav-link" to="/login">Login</Link></li>
<li class="nav-item"><Link class="nav-link" to="/signup">Sign up</Link></li>
</ul>
</nav>
首先十分感谢.
我正在学习使用Bootstrap并使用组件,特别是导航栏.我的链接/列表项没有显示,直接从Bootstrap复制.希望有人可以向我解释我缺少的东西.
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>NavBar</title>
<!-- bootstrap css -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
<a class="nav-item nav-link disabled" href="#">Disabled</a>
</div>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"> …