列中导航的100％宽度会使引导3中的页面溢出

Question

我似乎无法将导航范围扩大到专栏的100％。
如果我使用width：100％，那么导航将遍及整个页面。

是否必须为每个屏幕尺寸手动设置宽度？
这是针对一所学校的，我们被迫使用引导程序3。

<div class="container">
<div class="row">
    <div id="left" class="col-sm-2 hidden-xs">
        <ul id="navigation" class="nav nav-stacked affix">
            <li><a href="#">Fixed navigation</a></li>
            <li><a href="#">Link</a></li>
        </ul>
    </div>
    <div id="right" class="col-sm-10">
        <h1>Some text</h1>
    </div>
</div>

#right {
background-color: lightblue;
}

#left {  /* For showing the column width */
background-color: orange;
height: 100vh;
}

#navigation{
background-color: lightgreen;
height: 100%;
width: 100%;
}

这里最好看看。 https://www.bootply.com/TKjfHrza8M

Answer 1

尝试使用适合内容的高度和宽度。 如果需要，请添加填充。

#navigation{
  background-color: lightgreen;
  height: fit-content;
  width: fit-content;
}