我想要一个固定的导航栏,其宽度为中间自举列,但是当我将宽度设置为100%时,它会比此列大。 列的大小可能不同,因为它们是响应式的,导航栏的大小必须遵循列的大小。
这是导航栏的图片
CSS
body {
margin:0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
HTML BODY
<!--bootstrap-->
<div class="container-fluid">
<div class="row">
<div class="col-sm-1 col-md-3"> </div>
<div class="col-sm-10 col-md-6" id="middlebackground" >
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
<div style="padding:20px;margin-top:30px;background- color:#1abc9c;height:1500px;">
<h1>Fixed Top Navigation Bar</h1>
<h2>Scroll this page to see the effect</h2>
<h2>The navigation bar will stay at the top of the page while scrolling</h2>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
</div>
<!--bootstrap-->
</div>
<div class="col-sm-1 col-md-3"> </div>
</div>
</div>
答案 0 :(得分:2)
固定元素相对于视口而不是父视图,因此100%的宽度是视口的100%。要解决,请更改为绝对并将父项设置为relative:
#middlebackground { position: relative; }
#middlebackground ul { position: absolute; }