我有一个带固定bootstrap navbar.i的html页面有一个宽度为1000px的容器我试图把这个导航栏放在我的容器里但我无法实现。它会占用整个页面宽度。我想要固定的导航栏要在我的容器中对齐。我已附加了快照。enter image description here 在这里输入代码
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</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.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
html,body{
font-family: Arial, sans-serif;
font-size: 16px;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
text-rendering: optimizeLegibility;
background: #fff;
height: 100%;
margin:0;
}
#container {
width: 1000px;
display: table;
min-height: 100%;
margin: auto;
height:100%;
background:#f5f5f5;
}
</style>
</head>
<body style="height:1500px">
<div id="container">
<nav width="1000px" class="conatiner1 navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
<div class="container" style="margin-top:50px">
<h3>Fixed Navbar</h3>
<div class="row">
<div class="col-md-4">
<p>A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll.</p>
</div>
<div class="col-md-4">
<p>A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll.</p>
</div>
<div class="col-md-4">
<p>A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll.</p>
</div>
</div>
</div>
<h1>Scroll this page to see the effect</h1>
</div>
</body>
</html>
答案 0 :(得分:0)
<nav width="1000px" class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
见下面这个例子,它会有所帮助
答案 1 :(得分:0)
刚从导航栏中删除navbar-fixed-top
。
这是更新的代码
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</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.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
html,
body {
font-family: Arial, sans-serif;
font-size: 16px;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
text-rendering: optimizeLegibility;
background: #fff;
height: 100%;
margin: 0;
}
#container {
width: 1000px;
display: table;
min-height: 100%;
margin: auto;
height: 100%;
background: #f5f5f5;
}
</style>
</head>
<body style="height:1500px">
<div id="container">
<nav width="1000px" class="conatiner1 navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active">
<a href="#">Home</a>
</li>
<li>
<a href="#">Page 1</a>
</li>
<li>
<a href="#">Page 2</a>
</li>
<li>
<a href="#">Page 3</a>
</li>
</ul>
</div>
</nav>
<div class="container" style="margin-top:50px">
<h3>Fixed Navbar</h3>
<div class="row">
<div class="col-md-4">
<p>A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll.</p>
</div>
<div class="col-md-4">
<p>A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll.</p>
</div>
<div class="col-md-4">
<p>A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll.</p>
</div>
</div>
</div>
<h1>Scroll this page to see the effect</h1>
</div>
</body>
</html>
&#13;
答案 2 :(得分:0)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</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.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
html,body{
font-family: Arial, sans-serif;
font-size: 16px;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
text-rendering: optimizeLegibility;
background: #fff;
height: 100%;
margin:0;
}
.conatiner1{position:fixed; width:100%}
@media (max-width:769px){
.divContent{margin-top:230px !important;}
}
</style>
</head>
<body style="height:100%;">
<div class="container">
<nav class="conatiner1 navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
</div><div>
<div class="container divContent" style="margin-top:50px">
<h3>Fixed Navbar</h3>
<div class="row">
<div class="col-md-4">
<p>A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll.</p>
</div>
<div class="col-md-4">
<p>A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll.</p>
</div>
<div class="col-md-4">
<p>A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll.</p>
</div>
</div>
</div>
<h1>Scroll this page to see the effect</h1>
</div>
</body>
</html>
答案 3 :(得分:0)
Just Check following code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</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.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
html,body{
font-family: Arial, sans-serif;
font-size: 16px;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
text-rendering: optimizeLegibility;
background: #fff;
height: 100%;
margin:0;
}
#container {
width: 1000px;
display: table;
min-height: 100%;
margin: auto;
height:100%;
background:#f5f5f5;
}
nav {
width: 100%;
max-width: 1170px;
left: 0;
right: 0;
margin: 0 auto;
}
</style>
</head>
<body style="height:1500px">
<div id="container">
<nav width="1000px" class="conatiner1 navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
<div class="container" style="margin-top:50px">
<h3>Fixed Navbar</h3>
<div class="row">
<div class="col-md-4">
<p>A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll.</p>
</div>
<div class="col-md-4">
<p>A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll.</p>
</div>
<div class="col-md-4">
<p>A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll.</p>
</div>
</div>
</div>
<h1>Scroll this page to see the effect</h1>
</div>
</body>
</html>