Bootstrap 4:如何在容器中使用全宽导航栏(如 SO 导航栏)? [英] Bootstrap 4: How to have a full width navbar with the content in a container (Like the SO Navbar)?
本文介绍了Bootstrap 4:如何在容器中使用全宽导航栏(如 SO 导航栏)?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我使用的是 Bootstrap 4.
如何制作类似于 SO 导航栏的导航栏?
内容像容器"一样对齐,但引导程序 4 中的容器流体"的宽度?
我想要固定顶部"导航栏设置的宽度而不是固定顶部和容器"中的导航栏内容.
我会提供一个示例,但我正在尝试制作与此页面顶部的导航栏完全相同的内容.
解决方案
在 .container
元素周围包裹一个元素.
@import url( 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css');#primary-nav {背景颜色:天蓝色;}
I am using Bootstrap 4.
How do I make a navbar like the SO navbar?
With the content aligned like a "container" but the width of a "container-fluid" in bootstrap 4?
I want the width of the "fixed-top" navbar setting without it being fixed-top and the navbar content in a "container".
I would provide an example but I'm trying to make something exactly like the navbar at the top of this page.
解决方案
Wrap an element around the .container
element.
@import url( 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css' );
#primary-nav {
background-color: skyblue;
}
<div id="primary-nav">
<div class="container">
<ul class="nav">
<li class="nav-item">
<a href="#" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Contact</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">About</a>
</li>
</ul>
</div>
</div>
这篇关于Bootstrap 4:如何在容器中使用全宽导航栏(如 SO 导航栏)?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文