twitter-bootstrap Twitter Bootstrap：如何使顶部固定导航栏留在容器中而不是拉伸？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17308130/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Twitter Bootstrap: How to make top fixed navbar stay in container and not stretch?
提问by Jryl
I'm working with Twitter Bootstrap and the regular navbar you see in the guides: http://twitter.github.io/bootstrap/components.html#navbar
我正在使用 Twitter Bootstrap 和您在指南中看到的常规导航栏：http: //twitter.github.io/bootstrap/components.html#navbar
I don't want the navigation to stretch all the way left or right but stay where I can see both sides just like in the guide. The only difference is it would be fixed to the top.
我不希望导航一直向左或向右伸展，而是像指南中那样停留在我可以看到两侧的位置。唯一的区别是它会固定在顶部。
I was wondering, how do I make this become a fixed navbar as if I was using the navbar-fixed-topclass?
我想知道，如何使它成为固定的导航栏，就像我在使用navbar-fixed-top课程一样？
回答by JasonM
You should be able to do:
你应该能够做到：
<div class="navbar-fixed-top container">
<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="#">Title</a>
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
</div>
</div>
回答by Nabil Kadimi
Bootstrap 4, use .containerinside nav:
Bootstrap 4，.container在里面使用nav：
Demo
演示
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
<div class="container">
<a class="navbar-brand site-title" href="#">Hello World</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHelloWorld" aria-controls="navbarHelloWorld" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarHelloWorld">
<ul id="menu-top-menu" class="navbar-nav mr-auto">
<li class="nav-item"><a href="#" class="nav-link">About</a></li>
<li class="nav-item"><a href="#" class="nav-link">Blog</a></li>
<li class="nav-item"><a href="#" class="nav-link">Contact</a></li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" placeholder="Search" type="text">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</div>
</nav>回答by Roman Pushkin
For Bootstrap 4 it's sticky-topinstead of navbar-fixed-top. My code looks like this:
对于 Bootstrap 4，它sticky-top不是navbar-fixed-top. 我的代码如下所示：
<nav class="navbar sticky-top navbar-light"> <!-- <<< HERE -->
<a href="/" class="logo1"></a>
<div class="collapse navbar-collapse justify-content-end">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Product</a>
<a class="nav-item nav-link" href="#">Pricing</a>
<a class="nav-item nav-link" href="#">About</a>
</div>
</div>
</nav>
