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 导航栏一样的导航栏?
内容对齐方式为 "container" 但宽度为 bootstrap 中的 "container-fluid" 4?
我想要 "fixed-top" 导航栏设置的宽度而不是固定顶部和 "container" 中的导航栏内容。
我会提供一个示例,但我正在尝试制作与本页顶部的导航栏完全一样的东西。
在 .container
元素周围包裹一个元素。
@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>
我也遇到过这个问题。我通过将 <nav>...</nav>
放在 <div class='container'>...</div>
或 <div class='container-fluid'>...</div>
.
之外来解决
我能够将菜单设置为 100% 宽度
<ul class="navbar-nav nav-fill w-100">
<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>
使用 导航填充 w-100 和 Bootstrap 4
我尝试了@ravi.ram 的回答,但它对我不起作用。这是我的代码的开始方式。注意导航在容器外。解决方案在代码下方。
<nav class="navbar navbar-expand-lg">
<div class="container">
<a class="navbar-brand" href="index.html">
<img src="images/logo.jpg">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto mr-auto">
以下是一些有效的方法。
如果你想保留 container
那么你可以像这样使用内联样式。 <div class="container" style="max-width:100%;">
这是因为 container
的最大宽度设置为 1140px。
使用container-fluid
代替container
根本不要使用 container
。完全删除 div
。
我正在使用 Bootstrap 4.
如何制作像 SO 导航栏一样的导航栏?
内容对齐方式为 "container" 但宽度为 bootstrap 中的 "container-fluid" 4?
我想要 "fixed-top" 导航栏设置的宽度而不是固定顶部和 "container" 中的导航栏内容。
我会提供一个示例,但我正在尝试制作与本页顶部的导航栏完全一样的东西。
在 .container
元素周围包裹一个元素。
@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>
我也遇到过这个问题。我通过将 <nav>...</nav>
放在 <div class='container'>...</div>
或 <div class='container-fluid'>...</div>
.
我能够将菜单设置为 100% 宽度
<ul class="navbar-nav nav-fill w-100">
<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>
使用 导航填充 w-100 和 Bootstrap 4
我尝试了@ravi.ram 的回答,但它对我不起作用。这是我的代码的开始方式。注意导航在容器外。解决方案在代码下方。
<nav class="navbar navbar-expand-lg">
<div class="container">
<a class="navbar-brand" href="index.html">
<img src="images/logo.jpg">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto mr-auto">
以下是一些有效的方法。
如果你想保留
container
那么你可以像这样使用内联样式。<div class="container" style="max-width:100%;">
这是因为container
的最大宽度设置为 1140px。使用
container-fluid
代替container
根本不要使用
container
。完全删除div
。