列中導航的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;
}