100％宽度变得比bootstrap colum大

Question

我想要一个固定的导航栏，其宽度为中间自举列，但是当我将宽度设置为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>

Answer 1

固定元素相对于视口而不是父视图，因此100％的宽度是视口的100％。要解决，请更改为绝对并将父项设置为relative：

#middlebackground { position: relative; }
#middlebackground ul { position: absolute; }