引导导航-标签全宽度
引导导航-标签全宽度
提问于 2016-12-20 12:46:46
我使用绝对定位将引导导航标签定位在容器的底部，它很好地解决了一个问题:一旦我定位到绝对，它就不再是容器的完全宽度了。这是一张照片：
HTML：
<div class="container-fluid">
<ul class="nav nav-tabs profile-nav">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>CSS：
.profile-nav{
position: absolute;
bottom: 0;
transform: translateY(50%);
background-color: #fff;
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.15);
}
.profile-nav .nav-item{
padding-top: 15px;
padding-bottom: 15px;
}图像容器有位置:相对位置，以便像这样定位导航。所以，正如我所说，问题是，我不能使它的容器流体的全部宽度。
回答 3
Stack Overflow用户
回答已采纳
发布于 2016-12-20 13:30:21
要在底部修复导航选项卡，您需要使用引导类navbar-fixed-bottom将项目包装到nav中。
<nav class="navbar navbar-default navbar-fixed-bottom profile-nav">我认为导航标签不是最适合底部菜单的形式。尝试使用nav-pills代替。
看片段
.profile-nav {
background-color: #fff;
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.15);
border: none;
}
.profile-nav .nav-item {
padding-top: 15px;
padding-bottom: 15px;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default navbar-fixed-bottom profile-nav">
<div class="container-fluid">
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
Stack Overflow用户
发布于 2016-12-20 13:15:35
将left: 0;和width: 100%;添加到.profile-nav
.profile-nav {
position: absolute;
bottom: 0;
transform: translateY(50%);
background-color: #fff;
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.15);
/* add these */
width: 100%;
left: 0;
}
.profile-nav .nav-item {
padding-top: 15px;
padding-bottom: 15px;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<ul class="nav nav-tabs profile-nav">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
Stack Overflow用户
发布于 2016-12-20 13:23:30
试试这个，也许这会有帮助
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.profile-nav {
position: absolute;
bottom: 0;
transform: translateY(50%);
background-color: #eee;
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.15);
/* add these */
width: 100%;
left: 0;
}
.profile-nav .nav-item {
padding-top: 15px;
padding-bottom: 15px;
}
</style>
</head>
<body>
<div class="container-fluid">
<ul class="nav nav-tabs profile-nav">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
<div class="container-fluid">
<h3>Basic Navbar Example</h3>
<p>A navigation bar is a navigation header that is placed at the top of the page.</p>
</div>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/41242732
复制相关文章
相似问题
腾讯云开发者
